/* ============================================================================
   tokens.css — the single source of truth for color, type, spacing, radius.
   Nothing in component CSS may hard-code a color or font. Theme by overriding
   variables here, never by editing component rules. (See docs/DESIGN.md.)

   Two skins, one backend: the :root block below is the shared base + the
   CoffeeGolem theme. Evolvr layers its own theme over the same variable names
   (see the "Two skins" note at the bottom). Share variables; not the surface.
   ============================================================================ */

:root {
  /* --- Color: warm stone, one accent, one flag ---------------------------- */
  --bg:          #ECEAE3;  /* warm stone — greyer than the cream cliché */
  --panel:       #FBFAF7;  /* warm white */
  --ink:         #211D1A;  /* deep warm near-black */
  --ink-soft:    #6B645C;  /* muted secondary text */
  --line:        #DDD8CF;  /* hairline */

  --accent:      #B07A4A;  /* latte caramel — the one warm note ("coffee") */
  --accent-deep: #8A5E37;
  --accent-light:#CDA079;  /* lighter caramel — for the accent on dark surfaces */

  /* Decode-chip tones. --flag is the ONLY alarm-ish color, used once: on the
     "Pressure" decode line. Don't add more signal colors. */
  --clay:  #327E68;  /* decode "real ask" */
  --amber: #A9803B;  /* decode "underneath" */
  --flag:  #974840;  /* the one alarm-ish tone — "Pressure" line only.
                        Deepened from #A8584F so flag-colored text clears WCAG
                        AA (4.5:1) on --bg / --panel / --flag-wash. Same hue. */

  /* Soft tints derived from the above, for chip backgrounds / wells. */
  --accent-wash: #F3E9DE;
  --clay-wash:   #E4EEE9;
  --amber-wash:  #F1E7D5;
  --flag-wash:   #F3E2DE;
  --well:        #F4F1EA;  /* recessed surface inside a panel */

  /* --- Type: the meaning-bearing serif/sans split ------------------------- */
  /* Newsreader (serif) = message / correspondence text. It's *them*. */
  /* Hanken Grotesk (sans) = UI, body, the decode. It's *the system*. */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* System monospace — only for machine output (hashes, timestamps in the log). */
  --font-mono:  ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --t-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.1rem);
  --t-h2:      clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-lead:    clamp(1.1rem, 1.0rem + 0.5vw, 1.3rem);
  --t-body:    1.05rem;
  --t-small:   0.9rem;
  --t-micro:   0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* --- Spacing scale ------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --maxw:      1080px;  /* content column */
  --maxw-text: 660px;   /* prose measure */

  /* --- Radius ------------------------------------------------------------- */
  --r:    14px;  /* default radius */
  --r-sm: 9px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Elevation (soft, never harsh) -------------------------------------- */
  --shadow-soft: 0 1px 2px rgba(33, 29, 26, 0.04),
                 0 8px 24px rgba(33, 29, 26, 0.06);
  --shadow-lift: 0 2px 6px rgba(33, 29, 26, 0.06),
                 0 18px 50px rgba(33, 29, 26, 0.10);

  /* --- Motion: slow, arriving, never snapping ----------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle deceleration */
  --dur-fast: 220ms;
  --dur:      420ms;
  --dur-slow: 680ms;
  --pause:    600ms;  /* the load-bearing hold after a decode resolves */

  --focus: 0 0 0 3px var(--accent-wash), 0 0 0 5px var(--accent);
}

/* ============================================================================
   Two skins, one backend — the decision (see docs/DESIGN.md → "Two skins").

   CoffeeGolem and Evolvr are two brands / two sites on one shared backend.
   They share VARIABLES, not the surface. The split above is structured so the
   relationship is a deliberate decision, not accidental drift:

     • SHARED BASE — the same for both brands. Spacing scale, radius, motion
       durations/easing, the type *scale* (sizes/leading), the focus ring
       recipe, and the neutral ink ramp (--ink / --ink-soft). These keep the
       two sites feeling like siblings.

     • PER-BRAND THEME — overridden per site, never shared. The surface colors
       (--bg / --panel), the warmth accent (--accent + washes), the signal
       tones (--clay / --amber / --flag), and the font *families*
       (--font-serif / --font-sans). This is where the brands diverge on
       purpose: CoffeeGolem is warm/serif-led relief; Evolvr is cooler/sans-led
       evaluation.

   To theme Evolvr, you override ONLY the per-brand variables — component CSS is
   never touched. Illustrative sketch (lives in the Evolvr repo, not here):

     :root {
       --bg: #F4F5F7; --panel: #FFFFFF;          // cooler, app-chrome stone
       --accent: #3B6CB7; --accent-deep: #2C4F88; // Evolvr blue, not caramel
       --font-serif: "Jost", sans-serif;          // Evolvr collapses the split:
       --font-sans:  "Inter", system-ui;          // sans-led, evaluation energy
     }
     // shared base (spacing, radius, motion, type scale, ink ramp) stays as-is.

   Rule: if a value should look the same on both sites, it's base; if it carries
   brand identity, it's theme. Add new tokens on the correct side of that line.
   ============================================================================ */