/* ─────────────────────────────────────────────────────────────────────────────
   SLOPMETER BRAND TOKENS — the single source of truth.
   Both index.html and brand.html link this file. Nothing on the site should
   introduce a colour, size or shadow that is not defined here. If you need a
   new one, add it here first so it shows up in the kit at /brand.

   THE MATERIAL RULE. Everything on this site is a near-black object in a dark
   room, lit from directly above. That means: bodies are almost black, the TOP
   edge catches a hard white line, and anything hollow pools toxic lime light in
   its bottom. Get those three right and a new component belongs. Miss them and
   it reads like clip art bolted on, however nice the drawing is.
   ───────────────────────────────────────────────────────────────────────────── */
:root{

  /* ── INK. Surfaces, darkest to lightest. ─────────────────────────────────── */
  --ink:#070807;          /* the page itself */
  --ink-100:#0A0C0A;      /* a panel sitting on the page */
  --ink-200:#101210;      /* a raised panel */
  --ink-300:#161915;      /* the highest surface we go */
  --cavity:#010201;       /* the INSIDE of anything hollow. Darker than the page. */
  --line:#262A26;         /* hairline rule and border */

  /* ── PAPER. Type, brightest to dimmest. ──────────────────────────────────── */
  --paper:#FFFFFF;        /* headings and primary copy */
  --dim:#C9CFC7;          /* secondary copy, captions, notes */
  --faint:#8A8F88;        /* readable secondary. 5.9:1 on --ink, passes AA */
  --mute:#5D655C;         /* hint only. 3.1:1 on --ink, FAILS AA. Never use it
                             for anything the reader actually has to read. */

  /* ── SIGNAL. Every colour on the site means something. ───────────────────── */
  --toxic:#B6FF00;        /* THE brand colour. Slop, and the primary action. */
  --toxic-dim:#9BC72E;    /* lime under glass or at rest */
  --toxic-off:#4E6414;    /* lime with the power off */
  --yellow:#F5C400;       /* hazard tape. Warning and equipment ONLY. */
  --yellow-off:#7A6300;   /* hazard tape in shadow */
  --water:#2E86FF;        /* clean. The low end of the meter, and the flush. */
  --orange:#FF7A2F;       /* a severity-3 finding */
  --red:#FF3B1A;          /* a failure, e.g. the fidelity check */

  /* ── THE METER RAMP. Blue is human, lime is slop. Never reorder these. ───── */
  --m0:#2E86FF;  --m1:#3FD2D8;  --m2:#6FE49A;  --m3:#9BEF3C;  --m4:#B6FF00;
  --ramp:linear-gradient(90deg,var(--m0) 0%,var(--m1) 38%,var(--m2) 66%,var(--m3) 84%,var(--m4) 100%);

  /* ── SEVERITY. What a finding chip is worth. ─────────────────────────────── */
  --sev-1:#8A8F88;  --sev-2:var(--yellow);  --sev-3:var(--orange);  --sev-4:var(--toxic);

  /* ── TYPE. Three families, each with one job. ────────────────────────────── */
  --disp:'Archivo Black',Impact,system-ui,sans-serif;  /* headings, scores, buttons */
  --ui:'Archivo',system-ui,sans-serif;                 /* everything you read */
  --mono:'JetBrains Mono',ui-monospace,monospace;      /* data, codes, quoted text */

  /* ── SCALE. Display sizes are fluid, reading sizes are fixed. ────────────── */
  --t-hero:clamp(46px,8.2vw,116px);   /* the one h1 on the page */
  --t-display:clamp(32px,4.6vw,60px); /* section heads */
  --t-score:96px;                     /* the number */
  --t-band:34px;                      /* READS HUMAN / TOXIC */
  --t-cta:26px;                       /* primary button */
  --t-title:22px;                     /* panel heads */
  --t-lede:19px;                      /* the sentence under a head */
  --t-body:17px;                      /* base */
  --t-small:16px;                     /* captions and notes */
  --t-label:14px;                     /* tooltip and chip text */
  --t-micro:11px;                     /* mono legends */

  --lh-tight:.9;    /* display type */
  --lh-snug:1.2;
  --lh-body:1.55;
  --lh-read:1.85;   /* long passages of the user's own text */

  --track-disp:-.035em;  /* display type is tracked in */
  --track-mono:.14em;    /* mono legends are tracked out */

  /* ── LIGHT. The signature. Reuse these instead of writing new shadows. ───── */
  --lip:0 -3px 0 rgba(255,255,255,.92);          /* top edge catching the light */
  --lip-glow:0 -5px 12px rgba(255,255,255,.16);
  --lip-live:0 -3px 0 var(--toxic);              /* the same edge, focused */
  --lip-live-glow:0 -5px 22px rgba(182,255,0,.40);
  --depth:inset 0 34px 46px -14px rgba(0,0,0,1); /* the shadow the lip throws down */
  --depth-far:inset 0 96px 110px -60px rgba(0,0,0,1);
  --pool:inset 0 -26px 40px -22px rgba(182,255,0,.30);  /* lime in the bottom */
  --pool-live:inset 0 -26px 46px -20px rgba(182,255,0,.52);
  --drop:0 22px 44px -16px rgba(0,0,0,.95);      /* the object's own shadow */
  --glow-toxic:0 0 70px rgba(182,255,0,.34);
  --glow-yellow:0 6px 28px -6px rgba(245,196,0,.5);

  /* ── HAZARD TAPE. One definition, used by the top bar, the scrollbar and the
        eyewash paddle. If it is equipment or a warning, it wears this. ─────── */
  --tape:repeating-linear-gradient(45deg,var(--yellow) 0 16px,var(--ink) 16px 32px);
  /* The liquid surface. One tile, seamless: both ends sit at the same height
     with the same slope, so it can scroll forever. Used as a mask. */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13c16-11 34 11 50 0s34-11 50 0 34 11 50 0 34-11 50 0v13H0z' fill='%23fff'/%3E%3C/svg%3E");

  --tape-fine:repeating-linear-gradient(45deg,var(--yellow) 0 8px,#131513 8px 16px);

  /* ── MOTION. Fast for controls, slow for atmosphere. ─────────────────────── */
  --snap:.09s ease;       /* a thing being pressed */
  --quick:.15s ease;      /* hover */
  --ease:.25s ease;       /* a panel changing state */
  --slow:.35s ease;       /* light coming up */
  --spring:cubic-bezier(.3,1.6,.5,1);  /* the paddle */

  /* ── SPACE. ──────────────────────────────────────────────────────────────── */
  --gut:34px;             /* the inner padding of every readout panel */
  --wrap:1240px;          /* max content width */
}