/* tokens.css — TuVoto. Marca neutra (grafito): el color se reserva para el sentido del voto
   y para identificar partidos. Claro en :root, oscuro en [data-theme="dark"] y automático. */

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EBEDF0;
  --surface-3: #E0E3E8;
  --text: #15181D;
  --text-secondary: #474D57;
  --text-muted: #5E6572;
  --border: #DEE1E6;

  --primary: #1B1F27;
  --primary-solid: #1B1F27;
  --on-primary: #FFFFFF;
  --primary-soft: #E3E6EB;

  --yes: #146C43;
  --yes-soft: #DCF2E6;
  --no: #B42E27;
  --no-soft: #FBE7E5;
  --abstain: #7A4E00;
  --abstain-soft: #FFF1D6;
  --neutral-soft: #EBEDF0;

  --danger: #B42E27;
  --danger-soft: #FBE7E5;
  --on-danger: #FFFFFF;

  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -16px rgba(16, 24, 40, .18);
  --shadow-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 48px -20px rgba(16, 24, 40, .30);
  --veil: rgba(15, 18, 24, .42);
  --nav-bg: rgba(255, 255, 255, .82);

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-28: 1.75rem;
  --fs-42: 2.625rem;

  --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-icon: 12px;
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press: 150ms;
  --dur-move: 280ms;
  --dur-enter: 480ms;

  --content-max: 560px;
  --gutter: 20px;
  --nav-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --z-nav: 900;
  --z-sheet: 1000;
  --z-toast: 1100;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0D0F13;
  --surface: #161A20;
  --surface-2: #1F242C;
  --surface-3: #2A303A;
  --text: #E9ECF1;
  --text-secondary: #B6BDC8;
  --text-muted: #939BA8;
  --border: #272D36;

  --primary: #E9ECF1;
  --primary-solid: #E9ECF1;
  --on-primary: #111418;
  --primary-soft: #262C35;

  --yes: #5EDB97;
  --yes-soft: #12301F;
  --no: #FF8A80;
  --no-soft: #3A1D1B;
  --abstain: #F5C46B;
  --abstain-soft: #33270F;
  --neutral-soft: #1F242C;

  --danger: #FF8A80;
  --danger-soft: #3A1D1B;
  --on-danger: #2A0E0B;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --veil: rgba(0, 0, 0, .6);
  --nav-bg: rgba(22, 26, 32, .86);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0D0F13;
    --surface: #161A20;
    --surface-2: #1F242C;
    --surface-3: #2A303A;
    --text: #E9ECF1;
    --text-secondary: #B6BDC8;
    --text-muted: #939BA8;
    --border: #272D36;

    --primary: #E9ECF1;
    --primary-solid: #E9ECF1;
    --on-primary: #111418;
    --primary-soft: #262C35;

    --yes: #5EDB97;
    --yes-soft: #12301F;
    --no: #FF8A80;
    --no-soft: #3A1D1B;
    --abstain: #F5C46B;
    --abstain-soft: #33270F;
    --neutral-soft: #1F242C;

    --danger: #FF8A80;
    --danger-soft: #3A1D1B;
    --on-danger: #2A0E0B;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --veil: rgba(0, 0, 0, .6);
    --nav-bg: rgba(22, 26, 32, .86);

    color-scheme: dark;
  }
}