/* Design tokens — the single source of truth for color, space, type, shape,
   and layout constants. Everything else (base.css, components.css, legacy
   style.css) styles against these variables.

   Layout system (REDESIGN.md §11):
   - ONE layout breakpoint: 720px. Compact = (max-width: 720px); desktop is
     everything above. Media queries can't read custom properties, so 720px
     is repeated literally wherever a query needs it — never introduce
     another width. JS matches with matchMedia("(max-width: 720px)").
   - Three content widths, declared per screen as a class on <main>
     (.w-narrow / .w-standard / .w-wide — see base.css). */

:root {
  /* Form controls & UA chrome render for a light page (extended when a dark
     theme lands). */
  color-scheme: light;

  /* Color */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b70;
  --border: #e3e3e6;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-soft: #eff6ff;
  --accent-border: #bfdbfe;
  --on-accent: #ffffff; /* text/icons on accent, danger, and chip fills */
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fff7ed;
  --backdrop: rgba(0, 0, 0, 0.4); /* dim layer behind sheets / nav dropdown */
  --hatch: rgba(0, 0, 0, 0.045); /* off-hours diagonal stripes on the canvas */

  /* Space — 0.25rem steps */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Type scale */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.1rem;
  --font-xl: 1.5rem;

  /* Shape + depth */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-full: 999px;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);

  /* Content widths (see main.w-* in base.css) */
  --w-narrow: 480px;
  --w-standard: 860px;
  --w-wide: 1200px;

  /* Minimum touch-target size on compact screens */
  --touch-target: 44px;

  /* Stacking order: top bar above content, above the nav-dropdown overlay,
     below sheets/popovers */
  --z-nav-overlay: 40;
  --z-topbar: 50;
  --z-sheet: 100;
}

/* Dark theme. theme.js resolves the stored preference (or the OS setting)
   to html[data-theme="dark"|"light"] before first paint; "light" simply
   falls through to :root above. Surfaces stay dark-grey (not black) so the
   flat bordered card language keeps its raised-by-lightness relationship.
   --accent/--danger/--ok lighten a step: their light-mode values fall below
   3:1 as text on a dark surface. White-on-fill contrast lands ~3.7:1 —
   fine for UI components/large text, accepted for this app. --on-accent
   stays white: the JS role palette (js/ui/colors.js) is theme-independent.
   theme.js mirrors --bg into the theme-color meta — keep them in sync. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131316;
  --surface: #1e1e22;
  --text: #e7e7ea;
  --muted: #9b9ba3;
  --border: #34343b;
  --accent: #3b82f6;
  --accent-hover: #60a5fa; /* hover lightens on dark — inverse of light mode */
  --accent-soft: #1c2b4a;
  --accent-border: #2f4a7d;
  --danger: #ef4444;
  --danger-soft: #341b1d;
  --danger-border: #5c2a2e;
  --ok: #34d399;
  --ok-soft: #12291f;
  --warn: #d97706;
  --warn-soft: #33261a;
  --backdrop: rgba(0, 0, 0, 0.55);
  --hatch: rgba(255, 255, 255, 0.06);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.65);
}