/* ==========================================================================
   THE ROAD COMPANY — Design tokens
   Direction: industrial editorial / road signage, in daylight.
   Concrete ground, asphalt ink, one hi-vis used as FILL only.

   The hi-vis cannot be text here: #D6F53F measures 1.01:1 on the paper ground.
   It survives the move from dark to light by changing job, not value — it is a
   ground and a fill, never a letterform.
   ========================================================================== */

:root {
  /* --- Ground --------------------------------------------------------- */
  --paper:        #E9E9E4;  /* concrete, deliberately not white, not cream */
  --paper-raised: #F3F3EF;
  --paper-deep:   #DEDED8;

  /* --- Ink ------------------------------------------------------------ */
  --ink:      #14151A;  /* 14.97 on paper */
  --ink-soft: #4E4F55;  /*  6.70 on paper */
  --ink-mute: #5C5D63;  /*  5.39 on paper */

  /* --- Structure ------------------------------------------------------ */
  --rule:        #C7C7C0;
  --rule-strong: #A6A69E;

  /* --- Signal (hi-vis road marking) — FILL AND GROUND ONLY -------------- */
  --signal:      #D6F53F;
  --signal-deep: #B9D62A;
  --signal-ink:  #14151A;  /* 14.75 on signal */

  /* --- Alert: form errors, the only hue outside the palette ------------- */
  --alert:     #A3210A;  /* 6.20 on paper */
  --alert-ink: #6B1400;  /* 9.85 on signal */

  /* --- Type families --------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (fluid) ---------------------------------------------- */
  --t-hero:  clamp(3.25rem, min(19vw, 23vh), 14rem);
  --t-xxl:   clamp(2.75rem, 11vw, 10rem);
  --t-xl:    clamp(2rem, 5.2vw, 4rem);
  --t-lg:    clamp(1.5rem, 3vw, 2.25rem);
  --t-lede:  clamp(1.0625rem, 1.55vw, 1.375rem);
  --t-body:  clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-micro: 0.6875rem;

  /* --- Spacing --------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(5rem, 12vw, 11rem);

  /* --- Layout ---------------------------------------------------------- */
  --gutter:    clamp(1.25rem, 5vw, 5rem);
  --max-w:     104rem;
  --rail:      clamp(0px, 3.2vw, 3.25rem);
  --bar-h:     3.5rem;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-mid:   420ms;
  --dur-slow:  900ms;
}

@media (max-width: 40rem) {
  :root { --rail: 0px; --bar-h: 3rem; }
}

/* ==========================================================================
   Colour zones

   Each zone redefines the ground and ink tokens in its own scope, so every
   rule downstream inverts on its own with no duplicated declarations.

   The rhythm is deliberate: soft hue shifts at equal luminance
   (paper -> signal reads 1.01) punctuated by one hard value cut
   (signal -> ink reads 14.75). Measured ground rhythm: 1.24 changes / 1000px.
   Every ink clears AA 4.5 on every ground below.
   ========================================================================== */

.zone-raised {          /* the drop section — a lighter, gallery ground */
  --paper:        #F3F3EF;
  --paper-raised: #E9E9E4;
}

.zone-deep {            /* the footer — a step down to close the page */
  --paper: #DEDED8;
}

.zone-ink {             /* the manifesto — the one hard cut in the page */
  --paper:        #14151A;
  --paper-raised: #1B1D22;
  --ink:          #E9E9E4;
  --ink-soft:     #A8A79F;
  --ink-mute:     #8E8F94;
  --rule:         #2C2E34;
  --rule-strong:  #4A4C53;
}