/* ==========================================================================
   Unbrek — design tokens
   Locked brand values from brand-identity/design-rationale.md
   Ink #14302C · Accent #D9693D · Paper #F3F5F1 · Outfit 700 / DM Sans
   ========================================================================== */

:root {
  /* --- Core brand (do not alter) --- */
  --ink:            #14302C;
  --accent:         #D9693D;
  --paper:          #F3F5F1;

  /* --- Derived surface tones (dark site) --- */
  --ink-deep:       #0A1A18;   /* below-ink, used for shadows + footer well */
  --ink-raised:     #1A3A35;   /* cards, raised panels */
  --ink-line:       #234B45;   /* hairlines on ink */

  /* --- Accent states --- */
  --accent-bright:  #E58058;
  --accent-dim:     rgba(217, 105, 61, 0.55);
  --accent-ghost:   rgba(217, 105, 61, 0.12);

  /* Brand accent on ink measures 4.06:1 — under the 4.5:1 AA floor for text
     below 24px. Eyebrows and labels use this lighter tone instead (5.08:1).
     #D9693D stays the accent for fills, rules, the canvas and large type. */
  --accent-text:    #E58058;

  /* --- Type colour ramp on ink ---
     Values chosen against #14302C so every one of these clears AA for body
     text: 0.58 ≈ 5.0:1, 0.42 ≈ 3.4:1 (decorative / large only). */
  --t-hi:           #F3F5F1;
  --t-body:         rgba(243, 245, 241, 0.78);
  --t-mid:          rgba(243, 245, 241, 0.66);
  --t-low:          rgba(243, 245, 241, 0.58);
  --t-faint:        rgba(243, 245, 241, 0.42);

  /* --- Hairlines --- */
  --line:           rgba(243, 245, 241, 0.12);
  --line-soft:      rgba(243, 245, 241, 0.07);
  --line-strong:    rgba(243, 245, 241, 0.20);

  /* --- Typography --- */
  --font-display:   'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* Fluid display scale.
     The hero floor is 34px, not 42px: at 42px "Some things break." can't fit a
     375px screen and breaks after "things", which reads badly. */
  --fs-hero:        clamp(34px, 6.4vw, 92px);
  --fs-h1:          clamp(36px, 5vw, 72px);
  --fs-h2:          clamp(28px, 3.6vw, 50px);
  --fs-h3:          clamp(22px, 2.2vw, 30px);
  --fs-lead:        clamp(16px, 1.25vw, 18px);
  --fs-body:        16px;
  --fs-sm:          14px;
  --fs-xs:          12.5px;
  --fs-eyebrow:     11px;

  --lh-tight:       1.05;
  --lh-head:        1.12;
  --lh-body:        1.72;

  --tr-eyebrow:     0.34em;   /* eyebrow letter-spacing */
  --tr-display:     -0.03em;

  /* --- Spacing --- */
  --gut:            clamp(20px, 5vw, 40px);   /* page gutter */
  --wrap:           1180px;                    /* content max width */
  --wrap-narrow:    720px;

  /* --- Motion --- */
  --ease:           cubic-bezier(.4, 0, .2, 1);
  --ease-out:       cubic-bezier(.16, 1, .3, 1);
  --ease-pop:       cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast:       .22s;
  --dur:            .38s;
  --dur-slow:       .8s;

  /* --- Depth --- */
  --shadow-text:    0 4px 40px rgba(10, 26, 24, .85);
  --shadow-text-sm: 0 2px 24px rgba(10, 26, 24, .90);
  --shadow-card:    0 18px 50px -24px rgba(10, 26, 24, .9);

  --radius:         14px;
  --radius-sm:      10px;
  --radius-pill:    999px;

  /* Minimum comfortable touch target. Small links get padded out to this
     without changing how they look. */
  --tap:            44px;

  /* --- Layers --- */
  --z-canvas:       0;
  --z-content:      10;
  --z-nav:          60;
  --z-progress:     70;
  --z-loader:       90;
}

/* Honour the OS reduced-motion setting everywhere. The canvas engine reads
   this too (js/thread.js) and drops to a static end-state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur:      .01ms;
    --dur-slow: .01ms;
  }
}