/* ============================================================
   EastCoast ~ PvP ~ tokens.css
   Single source for every color, face, size and step.

   Palette is sampled from assets/range/plate.webp (the empty hill,
   shot on the server), then each foreground is walked in lightness
   until it clears its WCAG target on its surface. Two surfaces:
   ground (rock shadow, near black, warm) and paper (dry grass,
   cream). Rust stays as the brand accent.

   No raw hex may appear in site.css. Checked by review.py.
   ============================================================ */
:root {
  /* surfaces */
  --ground:   #141210;   /* rock shadow                         */
  --ground-2: #1c1916;   /* raised, used sparingly              */
  --paper:    #e8e2cf;   /* dry grass, lifted to cream          */
  --paper-2:  #ddd6c1;   /* paper on paper                      */

  /* on ground */
  --ink:      #e8e2cf;   /* 14.43:1                             */
  --dim:      #908d64;   /* grass mid     5.50:1                */
  --sky:      #5d80bb;   /* sky mid       4.69:1                */
  --rust:     #e45024;   /* brand         4.87:1                */

  /* on paper */
  --ink-p:    #141210;   /* 14.43:1                             */
  --dim-p:    #676542;   /*               4.61:1                */
  --sky-p:    #41639c;   /*               4.65:1                */
  --rust-p:   #965037;   /* poppy         4.63:1                */

  /* tier colors, the game's own read, used only for tier marks */
  --tier-easy:   #e8e2cf;
  --tier-medium: #5aa0dc;
  --tier-hard:   #78b46e;
  --tier-insane: #e45024;

  --rule:      color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-p:    color-mix(in srgb, var(--ink-p) 18%, transparent);
  --scrim:     color-mix(in srgb, var(--ground) 72%, transparent);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");

  /* faces: display grotesk with optical size, screen serif for
     reading, a mono that reads as chosen rather than defaulted */
  --face-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --face-text:    'Newsreader', Georgia, 'Times New Roman', serif;
  --face-mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale */
  --t-hero:    clamp(3.25rem, 9vw, 8.5rem);
  --t-display: clamp(2.25rem, 5vw, 4.25rem);
  --t-title:   clamp(1.6rem, 2.6vw, 2.25rem);
  --t-head:    1.375rem;
  --t-lede:    clamp(1.15rem, 1.6vw, 1.4rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-data:    0.8rem;

  --lh-hero:    0.92;
  --lh-display: 1.0;
  --lh-title:   1.1;
  --lh-body:    1.55;

  --measure:      62ch;
  --measure-lede: 48ch;

  /* space */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 7rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --col: minmax(0, 1fr);

  /* motion */
  --ease:    cubic-bezier(.2, .7, .2, 1);
  --t-fast:  160ms;
  --t-base:  360ms;
  --t-slow:  700ms;
}