/* Design tokens: light theme, dark theme (system + manual toggle) */
:root{
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#e4e4e7;
  --border:rgba(9,9,11,.08); --border-strong:rgba(9,9,11,.16);
  --text:#09090b; --muted:#71717a; --faint:#a1a1aa;
  --accent:#4f46e5; --accent-2:#c026d3; --accent-ink:#ffffff; --accent-soft:rgba(79,70,229,.10);
  --yes:#16a34a; --yes-soft:rgba(22,163,74,.12); --no:#e11d48; --no-soft:rgba(225,29,72,.10);
  --shadow:0 1px 2px rgba(9,9,11,.04),0 12px 32px -12px rgba(9,9,11,.12);
  --shadow-lg:0 2px 4px rgba(9,9,11,.04),0 24px 64px -16px rgba(9,9,11,.20);
  --glow-a:rgba(79,70,229,.10); --glow-b:rgba(192,38,211,.07);
  --radius:20px; --radius-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#09090b; --surface:#111113; --surface-2:#18181b; --surface-3:#27272a;
    --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14);
    --text:#fafafa; --muted:#a1a1aa; --faint:#52525b;
    --accent:#818cf8; --accent-2:#e879f9; --accent-ink:#09090b; --accent-soft:rgba(129,140,248,.12);
    --yes:#4ade80; --yes-soft:rgba(74,222,128,.12); --no:#fb7185; --no-soft:rgba(251,113,133,.12);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 64px -16px rgba(0,0,0,.8);
    --glow-a:rgba(129,140,248,.10); --glow-b:rgba(232,121,249,.06);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#09090b; --surface:#111113; --surface-2:#18181b; --surface-3:#27272a;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14);
  --text:#fafafa; --muted:#a1a1aa; --faint:#52525b;
  --accent:#818cf8; --accent-2:#e879f9; --accent-ink:#09090b; --accent-soft:rgba(129,140,248,.12);
  --yes:#4ade80; --yes-soft:rgba(74,222,128,.12); --no:#fb7185; --no-soft:rgba(251,113,133,.12);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 64px -16px rgba(0,0,0,.8);
  --glow-a:rgba(129,140,248,.10); --glow-b:rgba(232,121,249,.06);
  color-scheme:dark;
}