/* ============================================================
   EastCoast ~ PvP ~ design tokens
   Single source of truth. Nothing else declares a raw colour.

   Colour is sampled from the lighthouse mark and contrast-verified
   against --ground. Ratios in the comments are measured, not
   estimated; see derive_tokens.py.
   ============================================================ */

:root {

  /* ---- surfaces ------------------------------------------------ */
  --ground:      #0f1c25;   /* deepest navy in the mark                  */
  --surface:     #162a38;   /* raised panel                              */
  --surface-2:   #1d3341;   /* panel on panel, used sparingly            */

  /* ---- text ---------------------------------------------------- */
  --ink:         #ddd8cb;   /* logo cream          12.17:1  AA body      */
  --ink-dim:     #768588;   /* secondary            4.52:1  AA body      */
  --ink-faint:   #6f7d80;   /* labels only          4.06:1  AA large     */

  /* ---- accent -------------------------------------------------- */
  --rust:        #e45024;   /* links, emphasis      4.51:1  AA body      */
  --rust-deep:   #904028;   /* fill; --ink on top   5.00:1  AA body      */
  --signal:      #61904c;   /* live / ok            4.62:1  AA body      */
  --slate:       #508ab1;   /* secondary accent     4.63:1  AA body      */
  --alert:       #dd5476;   /* danger / destructive 4.62:1  AA body      */

  /* ---- lines --------------------------------------------------- */
  --rule:        rgba(221, 216, 203, 0.14);
  --rule-soft:   rgba(221, 216, 203, 0.07);
  --rule-rust:   rgba(228, 80,  36,  0.35);
  --rule-hard:   rgba(221, 216, 203, 0.28);

  /* ---- texture -------------------------------------------------- */
  /* The logo mark is speckled and distressed; the site it sits on had no
     surface at all. fractalNoise as a data URI: no image request, no
     WebGL, applied only to large surfaces so the cost stays trivial.
     Opacity is deliberately near the threshold of perception ~ anything
     stronger reads as broadcast static rather than paper. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E");

  /* ---- type ---------------------------------------------------- */
  --face-display: 'Bevan', Georgia, serif;
  --face-text:    'Zilla Slab', Georgia, serif;
  --face-mono:    'Sometype Mono', ui-monospace, monospace;

  /* Type is the primary architecture here, so the scale is deliberately
     wide. The old range was 1rem to 4.5rem and every heading sat in the
     middle of it, which flattened the page. Only the two structural steps
     scale with viewport. */
  --t-hero:     clamp(3.5rem, 13vw, 11rem);
  --t-display:  clamp(2.5rem, 6.4vw, 4.5rem);
  --t-title:    2.25rem;
  --t-head:     1.5rem;
  --t-sub:      1.175rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-label:    0.7rem;

  --lh-hero:    0.86;
  --lh-display: 0.98;
  --lh-title:   1.08;
  --lh-body:    1.6;

  --measure:    64ch;   /* body copy                */
  --measure-lede: 56ch; /* intro paragraphs         */

  /* ---- space ---------------------------------------------------- */
  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;

  --gutter: var(--s3);
  --wrap:   1180px;
  --wrap-narrow: 820px;

  /* ---- motion --------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease:   cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- depth ---------------------------------------------------- */
  --z-nav:   50;
  --z-skip: 100;
}