/* Theme token blocks. A theme is just a token set; component rules in app.css
   consume only these tokens, never literal color/radius/shadow/font. Lifted from
   app.py (THEME_VOROTEK + THEME_LOFI). Scope to :root[data-theme=…], never a bare
   [data-theme=…] — the toggle button carries data-theme and would redefine tokens
   on itself. */

:root[data-theme="vorotek"] {
  --canvas:#fff; --surface:#fff; --surface-alt:#f6f6f6;
  --text:#2e2e2e; --text-muted:#999; --text-accent:#3f4d56;
  --danger:#a33a2c;
  --border:#e2e2e2; --border-strong:#2e2e2e; --border-w:1px;
  --radius:0; --shadow:none; --shadow-press:none;

  --font-display:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --display-weight:300; --display-transform:uppercase; --display-tracking:0.1em;

  --nav-bg:#000; --nav-text:#fff;
  --cta-bg:#f9e09b; --cta-hover:#f2d075; --cta-active:#e6bd52; --cta-text:#2e2e2e;
  --cta-border:transparent;   /* borderless gold button, per design-system 5.2 */
  --cta-weight:600; --cta-transform:uppercase; --cta-tracking:0.2em;

  --chip-bg:#fff; --chip-border:#e2e2e2;
  --chip-on-bg:#e4eaed; --chip-on-border:#3f4d56; --chip-on-text:#3f4d56;
  --focus:#3f4d56;

  --grid-gap:48px; --card-gap:16px;
}

:root[data-theme="lofi"] {
  --canvas:#fafafa; --surface:#fff; --surface-alt:#f3f4f6;
  --text:#374151; --text-muted:#9ca3af; --text-accent:#2563eb;
  --danger:#b91c1c;
  --border:#374151; --border-strong:#374151; --border-w:2px;
  /* the signature hand-drawn corner + hard marker shadow */
  --radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow:4px 4px 0 #374151; --shadow-press:2px 2px 0 #374151;

  --font-display:'Comic Neue','Comic Sans MS',cursive;
  --font-body:'Comic Neue','Comic Sans MS',cursive;
  --display-weight:700; --display-transform:none; --display-tracking:0;

  --nav-bg:#fff; --nav-text:#374151;
  --cta-bg:#fff; --cta-hover:#f3f4f6; --cta-active:#e5e7eb; --cta-text:#374151;
  --cta-border:#374151;       /* outlined sketch button */
  --cta-weight:700; --cta-transform:uppercase; --cta-tracking:0.05em;

  --chip-bg:#fff; --chip-border:#374151;
  --chip-on-bg:#2563eb; --chip-on-border:#2563eb; --chip-on-text:#fff;
  --focus:#2563eb;

  --grid-gap:32px; --card-gap:12px;
}