/* Design tokens: the only file where color, type scale, spacing, radius and
   shadow values live. Every other stylesheet and <style> block references
   these; a literal that isn't one of the values below is a documented
   exception (a 1px hairline, a 0, a decorative one-off), not a new value.

   Two themes:
   - Light SaaS (default, on :root): admin, app, client, map, metrics,
     status, read, statement.
   - Forest brass (on [data-theme="forest"], set on <html>): the public scan
     page (index.html) and the landing page. index.html has no addressable
     <html>/<body> element (it is served as a bare fragment), so its own
     <style> block repeats these forest values locally and is kept in sync
     with this file by hand; that repetition is the one documented exception
     to "one file". */

:root {
  /* ---- Type scale (13/15/16/17/24/30, 2026-09-18 readability pass) ---- */
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-24: 24px;
  --fs-30: 30px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.6;
  /* Back-compat aliases: app.css named these differently before this file
     existed. Keep the names, move them onto the shared scale. */
  --fs-page-title: var(--fs-24);
  --fs-section-title: var(--fs-13);
  --fs-body: var(--fs-16);
  --fs-small: var(--fs-13);

  /* ---- Spacing (2/4/6/8/12/16/24/32, plus 40/64/96 for hero sections) ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-ctl: 8px;
  --radius: 10px;
  --radius-pill: 999px;

  /* ---- Shadow (two variants; a third rgba(0,0,0,.3) is dark mode's own,
     kept under data-theme="dark" below) ---- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, .10);
  --shadow: var(--shadow-sm); /* back-compat name used across admin.css */

  /* ---- Fonts ---- */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "DM Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- Light SaaS surface + color tokens (moved from admin.css) ---- */
  --canvas: #FFFFFF;
  --bg-page: #FBFBFA;
  --card: #FFFFFF;
  --rail: #FAFAFB;
  --hairline: #E6E8EC;
  --rule: #E1E4E9;
  --text: #111827;
  --muted: #374151;
  --faint: #4B5563;
  --ink: #111827;
  --accent: #111827;
  --accent-tint: #F3F4F6;
  --accent-hover: #1F2937;
  --on-accent: #FFFFFF; /* text/icon color on an --accent or --good fill */
  --good: #15803D; --good-bg: #ECFAF0;
  --warn: #B45309; --warn-bg: #FFF7E6; --warn-border: #F2D9A8;
  --bad: #B91C1C; --bad-bg: #FDECEC; --bad-border: #F3CFCF;
  /* One dot palette. Every status dot in the app draws from these three and
     from --dot-none, which is the absence of a state rather than a fourth
     colour. Nothing else gets to invent a dot. */
  --dot-ok: #15803D; --dot-warn: #B45309; --dot-bad: #B91C1C; --dot-none: #C5C9D0;
  --rail-w: 234px;
}

/* The admin does NOT follow the OS: Lee works with her Mac in dark mode and
   wants the white canvas here anyway, so the dark tokens live only behind an
   explicit data-theme="dark" on <html>, and nothing sets that today. This
   also governs status.html and map.html, which load admin.css. read.html
   and client.html have their own styles and are untouched. (Lee, 2026-09-10.) */
:root[data-theme="dark"] {
  --canvas: #111318; --card: #171A20; --rail: #14161B; --hairline: #262A32; --rule: #2E333C;
  --text: #F3F4F6; --muted: #C4C9D2; --faint: #9CA3AF; --ink: #F3F4F6;
  --accent: #F3F4F6; --accent-tint: #262A32; --accent-hover: #FFFFFF;
  --on-accent: #111318;
  --good: #4ADE80; --good-bg: #10281A; --warn: #FBBF24; --warn-bg: #2E2409; --bad: #F87171; --bad-bg: #2E1416;
  --dot-ok: #4ADE80; --dot-warn: #FBBF24; --dot-bad: #F87171; --dot-none: #4B5563;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: var(--shadow-sm);
}

/* ---- Forest brass theme: public scan page and landing page ----
   Same role, page-specific names (this theme predates this file; renaming
   every var(--ground) call site across a 3000-line page was judged more
   churn than the consolidation is worth, so the names stay and only the
   values are centralized here). */
[data-theme="forest"] {
  --ground: #0A1410;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-edge: rgba(201, 169, 106, 0.35);
  --brass: #C9A96A;
  --brass-dim: #8A7448;
  --brass-line: rgba(201, 169, 106, 0.22);
  --ink: #E6EEE7;
  --moss: #8FA697;
  --life: #5CF2A0;
  --life-glow: rgba(92, 242, 160, 0.45);
  --life-soft: rgba(92, 242, 160, 0.14);
  --warn: #E0B15C;
  --err: #F2B8A0;
  --brass-hover: #D6B97E;
  --placeholder: #7D7967;
  /* The brass button's pressed-key shadow (a 3D "key cap" edge), used by
     .btn/.btn.sm/.ghost's box-shadow everywhere on this page. */
  --shadow-key: #6E5A33;
}
