/* ══ TALQO SITE — THE TOKEN LAYER. ONE COPY. ═════════════════════════════════
   THE PREMIUM PASS (29 Sep 2026). Tokens only: every rule that draws with them lives in
   site.css (sections and components) and header.css (the bar). Every page links this file,
   and test/site-contrast.test.js reads the colours out of it, so each colour stays a literal
   six-digit hex on its own line.

   THE BRAND, RULED (THE RESKIN, 16 Sep 2026; the premium brief, 29 Sep 2026):
     · paper #F5F5F3 is the ground, white is a surface, ink #1A1A2E carries the words;
     · the logo's three bars are the only accent family: the deepest bar is the key phrase, the
       links and the focus ring; the two lighter bars are fills, and the middle one is the key
       phrase on ink;
     · Inter sets every word, IBM Plex Serif sets only money, the buyer's own words and the
       wordmark. The serif reads as "what the buyer said" because it is used for nothing else.
   The pre-reskin rust mark, the #0F4074 hover and the #A8B4CC grey are retired from the site. */

:root {
  /* ── Grounds ─────────────────────────────────────────────────────────── */
  --ground: #F5F5F3;
  --surface-0: #FFFFFF;
  /* The stage a capture sits on: a wash of the logo's lightest bar, light enough that the
     deepest bar still reads on it as a link (4.56:1, measured by site-contrast). */
  --surface-1: #EFF1FB;
  --surface-2: #FFFFFF;
  --surface: var(--surface-1);

  /* ── Ink and text ────────────────────────────────────────────────────── */
  --ink: #1A1A2E;
  --text-primary: #1A1A2E;
  --text-secondary: #474759;
  /* SOLVED, NOT CHOSEN (15 Aug 2026): the mockups' muted grey failed AA; this one clears the
     tightest surface. Guarded by test/site-contrast.test.js. */
  --text-muted: #66667A;

  /* ── The accent family: the logo's three bars ────────────────────────── */
  --bar-1: #C7CDF7;
  --bar-2: #8B9AF2;
  --bar-3: #4A5FE8;
  --blue: #4A5FE8;
  --blue-light: #EFF1FB;

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --border: #E4E4E9;
  --border-strong: #C9C9D1;
  --hairline: rgba(26, 26, 46, 0.09);

  /* ── Semantic, always paired with a word ─────────────────────────────── */
  --red: #8C2F2F;
  --red-light: #F6EAE6;
  --amber: #7D5D12;
  --amber-light: #F3ECD6;
  --green: #2C6E4C;
  --green-light: #E6EFE9;

  /* ── On ink: the one dark band, at the close ─────────────────────────── */
  --surface-ink: #1A1A2E;
  --text-on-ink: #F5F5F3;
  --text-on-ink-muted: #ABABBF;
  --blue-on-ink: #8B9AF2;
  /* A control's edge on ink: 3.3:1, above the 3:1 WCAG floor for the boundary of a form field. */
  --line-on-ink: #6B6B85;
  --border-on-ink: rgba(245, 245, 243, 0.16);

  /* ── The product's agreed tint, as the captures paint it ─────────────── */
  /* Behind a capture of the buyer's cell, so the crop and its frame are one surface. Never a text ground. */
  --said-tint: #EFF5F2;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --sans: 'Inter', ui-sans-serif, system-ui, "Segoe UI", -apple-system, sans-serif;
  /* The serif is for money, the buyer's words and the wordmark. Nothing else. */
  --serif: 'IBM Plex Serif', 'Source Serif 4', "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ── One frame language: the film, the captures and the try-it panel ─── */
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-frame: 0 1px 2px rgba(26, 26, 46, 0.04), 0 24px 48px -24px rgba(26, 26, 46, 0.22);
  --shadow-sheet: 0 1px 2px rgba(26, 26, 46, 0.05), 0 10px 28px -14px rgba(26, 26, 46, 0.20);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── One grid: 1,200 px of content, one left edge ────────────────────── */
  --measure: 1248px;
  --gutter: 24px;
}