/* 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.

   Three themes (the third, night, is at the end of this file):
   - 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; 20 and
     40 and the two clamps added 2026-10-01 for the forest pages' sub-heads,
     big numbers and heroes). Nothing a person reads goes below 13px. ---- */
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-40: 40px;
  --fs-display: clamp(28px, 4.6vw, 40px); /* forest page titles and section heads */
  --fs-hero: clamp(36px, 7vw, 64px);      /* the landing page's one headline */
  --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/20/24/32, plus 40/48/64/96 for sections and
     heroes). 1px is a hairline, not spacing, and stays literal. ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-ctl: 8px;
  --radius: 10px;
  --radius-pill: 999px;
  /* Card padding: a reading card, and the denser operator card that holds tables. */
  --pad-card: var(--sp-20);
  --pad-card-dense: var(--sp-16);

  /* ---- Controls: one height for a button and the input beside it, one for
     the small variant, and the 44px tap target on a phone (REACH.md). ---- */
  --ctl-h: 34px;
  --ctl-h-sm: 28px;
  --tap: 44px;

  /* ---- 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);
  --scrim: rgba(17, 24, 39, .32); /* behind a drawer or modal */
  --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;
  /* Impact chips on the client Fixes screens (High, Medium, Low). */
  --chip-high-bg: #FDECEC; --chip-high-fg: #B91C1C;
  --chip-med-bg: #FFF7E6; --chip-med-fg: #B45309;
  --chip-low-bg: #F3F4F6; --chip-low-fg: #374151;
  /* 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;
  /* LEE-536: source logos on Connections, each brand's own color (Simple Icons). */
  --brand-search-console: #458CF5;
  --brand-ga4: #E37400;
  --brand-stripe: #635BFF;
  --brand-google-ads: #4285F4;
  --brand-meta: #0467DF;
}

/* 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;
  --chip-high-bg: #2E1416; --chip-high-fg: #F87171;
  --chip-med-bg: #2E2409; --chip-med-fg: #FBBF24;
  --chip-low-bg: #262A32; --chip-low-fg: #C4C9D2;
  --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;
  --chip-high-bg: rgba(242, 184, 160, 0.14); --chip-high-fg: #F2B8A0;
  --chip-med-bg: rgba(224, 177, 92, 0.14); --chip-med-fg: #E0B15C;
  --chip-low-bg: rgba(255, 255, 255, 0.06); --chip-low-fg: #8FA697;
  --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;
}

/* ---- Night theme: the Tend homepage (landing.html), after Linear, 2026-10-05 ----
   Neutral dark, one sans, hairline frames. No garden imagery, no brand color. */
[data-theme="night"] {
  --ground: #08090A;                          /* page background, neutral near-black */
  --surface: #101112;                         /* cards and the product frame */
  --surface-2: #16171A;                       /* inputs and the frame's title bar */
  --edge: rgba(255, 255, 255, 0.08);          /* 1px hairlines */
  --edge-strong: rgba(255, 255, 255, 0.14);   /* top-edge fade on the frame */
  --ink: #F7F8F8;                             /* headings and key text */
  --muted: #8A8F98;                           /* body text */
  --faint: #62666D;                           /* small labels, decorative only */
  --pill: #E5E5E6;                            /* primary pill button */
  --pill-ink: #08090A;                        /* text on the pill */
  --pill-hover: #FFFFFF;                      /* pill on hover */
  --flag: #E2B340;                            /* the one color: status icon on a finding */
  --err: #F2B8A0;                             /* form error text, passes contrast on --ground */
  --font-inter: "Inter", system-ui, sans-serif; /* the page's one sans */
}