/* tokens.css — Docs. Paleta: índigo + grafito neutro. Claro, oscuro y automático con los mismos tokens. */

:root {
  --bg: #F4F4F7;
  --surface: #FFFFFF;
  --surface-2: #ECECF2;
  --surface-3: #E1E1EA;
  --text: #16152B;
  --text-secondary: #46455C;
  --text-muted: #5E5D74;
  --border: #E2E2EA;
  --primary: #4F44CE;
  --primary-solid: #4F44CE;
  --on-primary: #FFFFFF;
  --primary-soft: #E9E7FC;
  --accent: #0E8C7E;
  --danger: #B42E27;
  --danger-soft: #FBE7E5;
  --warning-text: #7A4E00;
  --warning-soft: #FFF1D6;
  --veil: rgba(15, 14, 30, 0.42);
  --glass: rgba(255, 255, 255, 0.78);
  --glow: radial-gradient(60% 50% at 50% 0%, rgba(79, 68, 206, 0.14), transparent 70%);
  --shadow-card: 0 1px 2px rgba(22, 21, 43, 0.05), 0 10px 28px -16px rgba(22, 21, 43, 0.22);
  --shadow-lift: 0 2px 4px rgba(22, 21, 43, 0.06), 0 22px 40px -20px rgba(22, 21, 43, 0.35);
  --shadow-primary: 0 10px 24px -8px rgba(79, 68, 206, 0.55);

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-title: 28px;
  --fs-hero: 40px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 150ms;
  --t: 260ms;

  --content-max: 1120px;
  --nav-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
  --bg: #0D0D16;
  --surface: #161622;
  --surface-2: #20202F;
  --surface-3: #2A2A3C;
  --text: #ECECF6;
  --text-secondary: #BDBCD2;
  --text-muted: #9998B2;
  --border: #272738;
  --primary: #A99FFF;
  --primary-solid: #A99FFF;
  --on-primary: #17123F;
  --primary-soft: #232045;
  --accent: #45D6C3;
  --danger: #FF8A80;
  --danger-soft: #3A1D1B;
  --warning-text: #F5C46B;
  --warning-soft: #33270F;
  --veil: rgba(0, 0, 0, 0.6);
  --glass: rgba(22, 22, 34, 0.78);
  --glow: radial-gradient(60% 50% at 50% 0%, rgba(169, 159, 255, 0.16), transparent 70%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  --shadow-primary: 0 10px 24px -10px rgba(169, 159, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0D0D16;
    --surface: #161622;
    --surface-2: #20202F;
    --surface-3: #2A2A3C;
    --text: #ECECF6;
    --text-secondary: #BDBCD2;
    --text-muted: #9998B2;
    --border: #272738;
    --primary: #A99FFF;
    --primary-solid: #A99FFF;
    --on-primary: #17123F;
    --primary-soft: #232045;
    --accent: #45D6C3;
    --danger: #FF8A80;
    --danger-soft: #3A1D1B;
    --warning-text: #F5C46B;
    --warning-soft: #33270F;
    --veil: rgba(0, 0, 0, 0.6);
    --glass: rgba(22, 22, 34, 0.78);
    --glow: radial-gradient(60% 50% at 50% 0%, rgba(169, 159, 255, 0.16), transparent 70%);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
    --shadow-primary: 0 10px 24px -10px rgba(169, 159, 255, 0.45);
  }
}