/*
 * Design tokens — TRANSCRIBED from src/ui/tokens.ts, not imported.
 *
 * Vercel's Root Directory isolation means no build here can read `..` above
 * `marketing/`, so transcription is the only option, not a shortcut.
 * `tests/marketing/tokenParity.test.ts` asserts these hexes match the source;
 * drift is a red test rather than a discovery.
 *
 * Only the brand subset the public site actually uses is transcribed. Adding a
 * token here means adding it to the parity test's expectation too.
 */

:root {
  /* Surfaces */
  --app-bg: #dad5cc;
  --screen: #f4f1eb;
  --card: #ffffff;
  --card-subtle: #fbfaf7;

  /* Ink */
  --ink: #17140f;
  --muted: #8a8378;
  --secondary: #6b655b;
  --secondary-deep: #4a463f;

  /* Brand */
  --primary: #ff5a1f;
  --primary-light: #ff7a3d;
  --primary-deep: #c2440e;

  /* Semantic — used by the marking-status legend, which is the page's signature device */
  --success: #2e7d32;
  --warning: #b0870a;
  --info-blue: #3b6ea5;
  --danger: #e23b2e;
  --status-open: #cfc8bb;

  /* Lines */
  --border-09: rgba(23, 20, 15, 0.09);
  --border-12: rgba(23, 20, 15, 0.12);
  --border-20: rgba(23, 20, 15, 0.2);

  /*
   * SEMANTIC PAIRINGS — use these for text and buttons, never the raw brand
   * colours above. The measured contrast ratios rule two obvious choices out:
   *
   *   white on --primary      #FF5A1F  3.12  FAILS AA — orange is a marker, never a button
   *   white on --primary-deep #C2440E  5.09  passes   — this is the call-to-action colour
   *   --muted on --screen     #8A8378  3.33  FAILS AA — never body copy
   *   --secondary on --screen #6B655B  5.12  passes   — this is sub-copy
   *   --ink on --screen       #17140F  14.9  passes
   *
   * Encoding the pairing means the accessible choice is the default rather than
   * something to remember. See docs/MARKETING_SITE.md § Budgets.
   */
  /*
   * MEASURED CORRECTION 2026-08-05. The pairings below were first set against
   * the screen surface #F4F1EB and then used on the DESK background #DAD5CC,
   * which is darker — so they silently failed on every section that sits on the
   * page field rather than in a panel. Measured on desk:
   *
   *   --secondary   #6B655B  3.95  FAILS AA   (was carrying the lede and kickers)
   *   --primary-deep #C2440E 3.48  FAILS AA
   *   --secondary-deep #4A463F 6.42 passes    -> subtext, both surfaces
   *   --accent-deep #96350B  5.11  passes     -> small orange, both surfaces
   *
   * `--accent-deep` is the one value here NOT transcribed from src/ui/tokens.ts.
   * The app has no equivalent because it never sets 11px orange type on the desk
   * background; this page does, in the mono kickers. Derived by darkening
   * primaryDeep until it cleared 4.5 on #DAD5CC. Deliberately not added to the
   * parity test, which guards transcription — this is a marketing-only colour
   * and claiming otherwise would make the test lie.
   */
  --accent-deep: #96350b;

  --cta-bg: var(--ink);
  --cta-fg: var(--screen);
  --cta-bg-hover: #2a251d;
  --accent-bg: var(--accent-deep);
  --accent-fg: #ffffff;
  --text-strong: var(--ink);
  --text-body: var(--secondary-deep);
  --text-subtle: var(--secondary-deep);
  --text-faint-ok: var(--muted); /* decorative/large only — never body copy */

  /* Radius — verbatim from tokens.ts */
  --radius-pill: 999px;
  --radius-card: 13px;
  --radius-card-sm: 10px;
  --radius-control: 9px;
  --radius-control-sm: 6px;

  /* Type families. Self-hosted; see styles/site.css @font-face. */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /*
   * Type scale — deliberately EXTENDED UPWARD from the app's.
   * tokens.ts sets body at 13px, which is right in a dense tablet nav rail and
   * wrong on a web page read at arm's length in sunlight. This divergence is
   * intentional; do not "correct" it back to the app's values.
   */
  --step-h1: 2.125rem; /* 34px phone; scales up at breakpoints in site.css */
  --step-h2: 1.625rem; /* 26px phone */
  --step-h3: 1.125rem; /* 18px */
  --step-body: 1.03125rem; /* 16.5px */
  --step-mono: 0.6875rem; /* 11px */

  /* Layout — breakpoints match the app's so site and product agree what "phone" means */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1100px;
  --max-width: 1120px;
  --touch-target: 44px;

  /* Motion — the app's section fade, and nothing else */
  --fade-ms: 200ms;
}