/* =====================================================================
   What's on the Test — canonical brand tokens (SINGLE SOURCE OF TRUTH)

   Plain, framework-agnostic CSS custom properties. Both the website
   (landing-wott/) and, in a later sprint, the app (src/) consume these.

   MASTER copy: brand/tokens.css
   Published copy served by the site: landing-wott/site/tokens.css
   → keep the two byte-identical; edit here, then copy to the site.

   Rules encoded by these tokens:
   - Two greens, each with ONE job: --brand (vivid, brand moments only) vs
     --ui-green (interactive UI, passes WCAG on paper). Never use --brand as
     small text or a small UI fill.
   - No gradients anywhere. Flat fills only. (Shadows are fine.)
   - The highlighter is a SOLID --lime block (pseudo-element), never a gradient.
   ===================================================================== */

:root {
  /* ── Surfaces ── */
  --paper:      #FAF6EC;   /* page background */
  --surface:    #FFFDF8;   /* cards / panels */
  --paper-tan:  #ECE5D4;   /* secondary surface */

  /* ── Ink / text ── */
  --ink:        #1C1A16;   /* primary text */
  --ink-2:      #3A362E;   /* secondary text */
  --muted:      #8A8474;   /* tertiary text / labels */
  --hair:       #E7DFCE;   /* hairline / border */
  --hair-2:     #EFE8D8;   /* softer inner border */
  --track:      #EAE2CF;   /* progress-bar / ring track */

  /* ── Brand green — VIVID. Brand moments ONLY: logo, hero, big CTA,
        pace ring, icons. Do NOT use as small text or small UI fills. ── */
  --brand:      #39B54A;
  --brand-hover:#2C8F3A;   /* darker press/hover state for --brand fills */

  /* ── UI green — interactive UI. Passes WCAG on paper. ── */
  --ui-green:      #278444; /* small button fills, white text — 5.4:1 */
  --ui-green-hover:#1F6C38; /* hover/press for --ui-green fills */
  --ui-green-ink:  #1A5E32; /* green TEXT & links on paper — 7.0:1 */
  --green-wash:    #E4F3E7; /* green tint background (chips, washes) */
  --green-line:    #C2DECA; /* green border */

  /* ── Highlighter — SOLID lime block (see .hl recipe below) ── */
  --lime:       #B6F44A;

  /* ── Pace / mastery states (contrast-tuned; base + ink + wash) ── */
  --good:       #33A95A;  --good-ink:  #1E7A3C;  --good-wash:  #E4F3E7;
  --amber:      #E0922A;  --amber-ink: #8B5710;  --amber-wash: #F7ECD6;
  --red:        #DC4C3E;  --red-ink:   #B23227;  --red-wash:   #F7E1DC;

  /* ── Type ── */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (fluid where it helps) */
  --fs-display: clamp(38px, 5.4vw, 62px); /* hero H1 */
  --fs-h2:      clamp(28px, 3.6vw, 42px);
  --fs-h3:      20px;
  --fs-lede:    19px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-label:   12px;   /* uppercase, tracked */

  /* Weights */
  --fw-body: 400; --fw-medium: 500; --fw-semi: 600;
  --fw-bold: 700; --fw-x: 800; --fw-black: 900;

  /* ── Radii ── */
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ── Elevation (soft, low-opacity — never a gradient) ── */
  --shadow-brand: 0 12px 24px -14px rgba(57,181,74,.85);
  --shadow-card:  0 40px 80px -50px rgba(30,30,20,.4);

  /* ── Paper texture (subtle dotted grid used site-wide) ── */
  --paper-dot: radial-gradient(circle at 1px 1px, rgba(0,0,0,.018) 1px, transparent 0);
  --paper-dot-size: 24px 24px;
}

/* ---------------------------------------------------------------------
   Highlighter recipe — a SOLID lime marker on the lower ~56% of the text.
   Usage: <span class="hl">Test</span>

   The "no gradients" rule means no MULTI-COLOR / color-transition gradients.
   This marker is a single flat lime — rendered via a one-color background-image
   only because background-size can band it to the lower half and, crucially,
   box-decoration-break clones it correctly when a highlighted phrase wraps
   across lines (a pseudo-element block cannot). It is a flat color, not a fade.
   --------------------------------------------------------------------- */
.hl {
  background-image: linear-gradient(0deg, var(--lime), var(--lime)); /* single flat color */
  background-repeat: no-repeat;
  background-size: 100% 56%;
  background-position: 0 84%;
  padding: 0 .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}