/* =========================================================================
   SUPER DEAL MAKER -- THE DESIGN TOKENS. THE ONE FILE (Step 105, rule C1).

   Every colour, size, space, radius, shadow and border on the platform is
   named here, and ONLY here. Every other stylesheet and template reads these
   names; `audit/scripts/step105_look_check.py` fails on a hex value anywhere
   else. A value that is not here does not exist.

   CONTRAST (C3) -- computed, not quoted; audit/scripts/step105_tokens_check.py
   prints the live figures on every run:
     brand on ink        12.87:1   the H1 band (R33)
     ink on brand        12.87:1   the H2 band and every button (R33)
     brand on white       1.54:1   FORBIDDEN AS TEXT, anywhere (R33, C3)
     ink on white        19.80:1   body text
     muted on white       7.56:1   help text, captions
     white on ok          5.40:1   the "Ready" state
     ink on warn         12.54:1   the "Almost" state
     white on bad         6.57:1   the "Not yet" state and errors
   ========================================================================= */
:root {
  /* ---- C2. THE PALETTE -------------------------------------------------- */
  --c-brand: #00E5FF;        /* RMK cyan: a BACKGROUND or an ACCENT, never text on white */
  --c-ink: #0A0A0A;          /* near-black: text, and the H1 band */
  --c-white: #FFFFFF;
  --c-grey-line: #C9CED4;    /* grey 1 of 3: borders and rules */
  --c-grey-muted: #4B5563;   /* grey 2 of 3: muted text (7.56:1 on white) */
  --c-grey-page: #F4F5F7;    /* grey 3 of 3: page and panel backgrounds */
  --c-ok: #1B7A3A;           /* STATE ONLY: ready, done, saved */
  --c-warn: #FFC53D;         /* STATE ONLY: almost, waiting -- dark text on it */
  --c-bad: #B42318;          /* STATE ONLY: not yet, error */
  /* THE FIVE READINESS BANDS a funder or buyer reads, and the withheld grey
     (template_helper.BAND_COLOURS, Step 98/99). FILLS ONLY, dark text on
     every one. Step 105 Task 9: they were computed into inline styles. */
  --c-band-excellent: #7BD88F;
  --c-band-good: #B6E3A1;
  --c-band-average: #FFE28A;
  --c-band-below-average: #FFBF7A;
  --c-band-poor: #FF9B9B;
  --c-band-unverified: #D9DDE1;

  /* ---- C4. TYPE -- one family, a stack that renders on a cheap Android ---- */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
                 "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Roboto Mono", Consolas, monospace;  /* extra: figures in tables of numbers keep their columns */
  --fs-1: 14px;   /* help text, captions, badges -- never body */
  --fs-2: 16px;   /* BODY: the floor (C4) */
  --fs-3: 18px;   /* lead paragraphs, H3 */
  --fs-4: 22px;   /* H2 band */
  --fs-5: 26px;   /* H1 band on a phone */
  --fs-6: 32px;   /* H1 band on a desktop, the home page's first line */
  --fw-regular: 400;   /* body, and BUTTONS (R33: not bold) */
  --fw-medium: 600;    /* labels, table headers */
  --fw-bold: 700;      /* H1 and H2 bands */
  --lh-body: 1.5;      /* C4: at least 1.5 */
  --lh-tight: 1.25;    /* extra: the heading bands, where 1.5 wastes a phone's height */
  --measure: 75ch;     /* C4: at most 75 characters a line */

  /* ---- C5. SPACE, on a 4px step ----------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- C1. RADIUS, SHADOW, BORDER, TARGET ------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 24px;    /* buttons: a 48px target rounded at half its height */
  --shadow-card: 0 1px 3px rgba(10, 10, 10, 0.12);   /* the ink, at 12% */
  --border-width: 1px;
  --border: var(--border-width) solid var(--c-grey-line);
  --border-strong: 2px solid var(--c-ink);
  --target: 48px;          /* C7: every touch target at least 48px */
  --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-ink);  /* C8: a ring, visible on white AND on the brand band */

  /* ---- ALIASES, so the templates written before Step 105 read the tokens --
     `--brand-cyan*` and `--brand-blue*` were Step 89/91's names. The blue was
     the "leave this page" control; R33 allows no blue, so it becomes the
     secondary button's ink. Kept as names only -- nothing new uses them. */
  --brand-cyan: var(--c-brand);
  --brand-cyan-ink: var(--c-ink);
  --brand-blue: var(--c-ink);
  --brand-blue-ink: var(--c-white);
}