/* MODULITH planner tokens - the style brief's §4 verbatim ("Day Grid / Night Grid").
   `data-mode` on <html> selects the theme; light is the default. The stage reads --sky, --grid and
   --floor from here too, so the picture and the chrome move together. Do not add a value here that
   the brief does not have; the artboard's extras live in app.css under their own names. */
:root, [data-mode="light"] {
  --base:#F3F2EF; --ink:#1D1E20; --ink-2:#4A4B50; --ink-3:#66676D;
  --glass-bg:rgba(251,251,250,.84); --glass-border:rgba(29,30,32,.10);
  --glass-shadow:0 20px 40px rgba(50,40,110,.12), inset 0 1px 0 #FFFFFF;
  --chip-bg:rgba(255,255,255,.80); --chip-border:rgba(29,30,32,.12);
  --track:rgba(29,30,32,.06); --seg-on:#FFFFFF;
  --well:#ECEAF2; --input-bg:#FFFFFF; --input-border:rgba(29,30,32,.16);
  --key-bg:#FFFFFF; --key-border:rgba(29,30,32,.12); --key-shadow:0 2px 0 rgba(29,30,32,.10);
  --key-on-bg:#FFF1E7; --key-on-shadow:0 2px 0 #E5560A, 0 0 0 3px rgba(255,106,26,.14);
  --toggle-on:rgba(29,30,32,.10);
  --measure:#0B7285; --measure-bg:#FFFFFF; --club:#1D5FD1;
  --success:#1F6B45; --danger:#B4232C; --warning:#E3A21A;
  --cta-shadow:0 3px 0 #C24A0E, 0 10px 24px rgba(255,106,26,.25);
  --sky:linear-gradient(180deg,#E8E5F7 0%,#F2EAF2 34%,#FCE6D8 56%,#EFEBF7 56.2%,#F4F2F8 100%);
  --grid:rgba(92,72,196,.20); --floor:#EFECF6;
  color-scheme: light;
}
[data-mode="dark"] {
  --base:#0A0824; --ink:#F4F4F5; --ink-2:#A1A1AA; --ink-3:#8B8B94;
  /* neutral charcoal glass over the indigo stage, NOT indigo-on-indigo */
  --glass-bg:rgba(29,30,32,.80); --glass-border:rgba(255,255,255,.08);
  --glass-shadow:0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --chip-bg:rgba(29,30,32,.74); --chip-border:rgba(255,255,255,.09);
  --track:rgba(0,0,0,.28); --seg-on:rgba(255,255,255,.12);
  --well:rgba(0,0,0,.25); --input-bg:rgba(0,0,0,.25); --input-border:rgba(255,255,255,.14);
  --key-bg:rgba(255,255,255,.05); --key-border:rgba(255,255,255,.10); --key-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  --key-on-bg:rgba(255,106,26,.16); --key-on-shadow:0 0 16px rgba(255,106,26,.30), inset 0 1px 0 rgba(255,255,255,.08);
  --toggle-on:rgba(255,255,255,.14);
  --measure:#22D3EE; --measure-bg:#0A0824; --club:#7FB2FF;
  --success:#7BE3B0; --danger:#FF8A8E; --warning:#F5B83D;
  --cta-shadow:0 6px 22px rgba(255,106,26,.40);
  --sky:radial-gradient(110% 80% at 50% 56%,#4A2F9E 0%,#24196A 32%,#120E3A 62%,#0A0824 100%);
  --grid:rgba(34,211,238,.32); --floor:transparent;
  color-scheme: dark;
}
:root {
  --orange:#FF6A1A; --orange-edge:#E5560A; --on-orange:#19191B;
  --blur:blur(18px) saturate(140%);
  --r-sm:9px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --d-press:120ms; --d-hover:150ms; --d-pop:200ms; --d-panel:240ms;
  /* type, §5 */
  --font-display:'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --font-ui:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-press:0ms; --d-hover:0ms; --d-pop:0ms; --d-panel:0ms; }
}