/* =========================================================
   Creative Dev — Design tokens (variables CSS)
   Fuente de verdad: /tokens/design-tokens.json
   ========================================================= */
:root {
  /* Marca */
  --primary-50: #F1EFFF;  --primary-100: #E2DEFF; --primary-200: #C6BEFF;
  --primary-300: #A598FF; --primary-400: #8B7CFF; --primary-500: #7B6CFF;
  --primary-600: #5B4BE8; --primary-700: #4B3BD6; --primary-800: #3A2DAA;
  --primary-900: #251C70;
  --accent-300: #DCFA8E;  --accent-400: #C8F65A;  --accent-600: #7FA81A; --accent-700: #4F6B0C;
  --secondary-400: #38D9F5; --secondary-700: #0B6E82;

  /* Neutros */
  --n-0: #FFFFFF; --n-50: #FAFAFC; --n-100: #F2F2F7; --n-200: #E4E4EC;
  --n-300: #C9C9D6; --n-400: #A1A1B5; --n-500: #76768C; --n-600: #55556A;
  --n-700: #34344A; --n-800: #1C1C2A; --n-850: #15151F; --n-900: #0B0B12;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.2rem, 1.1rem + .4vw, 1.375rem);
  --fs-xl: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  --fs-4xl: clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);

  /* Espaciado 8px */
  --s-0-5: 4px; --s-1: 8px; --s-1-5: 12px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px;

  /* Forma */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Movimiento */
  --d-instant: 80ms; --d-fast: 160ms; --d-base: 240ms; --d-slow: 400ms; --d-slower: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.3);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* Capas */
  --z-sticky: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;

  --container: 1200px;
  --header-h: 72px;

  /* Tema claro (por defecto) */
  color-scheme: light;
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: #12121A;
  --text-muted: var(--n-600);
  --link: var(--primary-700);
  --brand-text: var(--primary-700);
  --btn-primary-bg: var(--primary-600);
  --btn-primary-hover: var(--primary-700);
  --focus: var(--primary-600);
  --success: #0F7A4A; --warning: #8A5A00; --danger: #B42335; --info: #0B6E82;
  --success-bg: #E5F6EE; --warning-bg: #FFF4DC; --danger-bg: #FDE8EB; --info-bg: #E0F5FA;
  --accent-text: var(--accent-700);
  --grid-line: rgba(18,18,26,.06);
  --shadow-sm: 0 1px 2px rgba(11,11,18,.08);
  --shadow-md: 0 8px 24px -8px rgba(11,11,18,.18);
  --shadow-lg: 0 24px 64px -16px rgba(11,11,18,.32);
  --shadow-glow: 0 0 0 1px rgba(91,75,232,.35), 0 12px 40px -8px rgba(91,75,232,.35);
}

/* Tema oscuro: preferencia del sistema salvo que el usuario elija claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--n-900);
    --surface: var(--n-850);
    --surface-2: var(--n-800);
    --border: #2A2A3C;
    --border-strong: #3A3A52;
    --text: var(--n-100);
    --text-muted: var(--n-400);
    --link: var(--primary-400);
    --brand-text: var(--primary-400);
    --focus: var(--accent-400);
    --success: #4ADE9A; --warning: #FFC95C; --danger: #FF7A8A; --info: #38D9F5;
    --success-bg: rgba(74,222,154,.12); --warning-bg: rgba(255,201,92,.12);
    --danger-bg: rgba(255,122,138,.12); --info-bg: rgba(56,217,245,.12);
    --accent-text: var(--accent-400);
    --grid-line: rgba(242,242,247,.05);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.7);
    --shadow-glow: 0 0 0 1px rgba(123,108,255,.45), 0 12px 40px -8px rgba(123,108,255,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--n-900);
  --surface: var(--n-850);
  --surface-2: var(--n-800);
  --border: #2A2A3C;
  --border-strong: #3A3A52;
  --text: var(--n-100);
  --text-muted: var(--n-400);
  --link: var(--primary-400);
  --brand-text: var(--primary-400);
  --focus: var(--accent-400);
  --success: #4ADE9A; --warning: #FFC95C; --danger: #FF7A8A; --info: #38D9F5;
  --success-bg: rgba(74,222,154,.12); --warning-bg: rgba(255,201,92,.12);
  --danger-bg: rgba(255,122,138,.12); --info-bg: rgba(56,217,245,.12);
  --accent-text: var(--accent-400);
  --grid-line: rgba(242,242,247,.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.7);
  --shadow-glow: 0 0 0 1px rgba(123,108,255,.45), 0 12px 40px -8px rgba(123,108,255,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: .01ms; --d-fast: .01ms; --d-base: .01ms; --d-slow: .01ms; --d-slower: .01ms;
  }
}