/* ============================================================
   TOKENS: the whole visual language lives here.

   Two grounds, one hue. The page hard-cuts between complete white
   and the OS1 vermilion from brand_inspiration/, and text is always
   the other one. Orange on white cannot reach 4.5:1 at its brightest,
   so the accent carries two stops (one hue, two lightnesses):

     #FF4D2E  bright. Orange grounds, display type on white, the thread.
              3.31:1 against white: large text only (>= 24px, or 19px bold).
     #CC3510  ink.    Every size of text on white. 5.14:1.

   On an orange ground all text is white, and it is never set below the
   large-text threshold. Hierarchy there comes from size and weight,
   never from lowering opacity, which would drop it under 3:1.
   ============================================================ */

:root {
  /* ── Colour ─────────────────────────────────────────────── */
  --white:        #FFFFFF;
  --orange:       #FF4D2E;
  --orange-ink:   #CC3510;
  --orange-press: #B8330D;   /* hover/pressed on white, 5.97:1 */
  --orange-edge:  #E8401F;   /* vignette falloff on the orange field */

  /* shadow tint: a burnt version of the hue, never grey or black */
  --shade: 110 22 4;

  /* ── Type families: one per job ─────────────────────────────
     display  Unbounded: a wide geometric grotesk. Type is the hero.
     text     Instrument Sans: paragraphs, buttons. Reads well long.
     mono     JetBrains Mono: labels, nav, stage names, figures only.
              Never paragraphs (mono as costume is a tell). */
  --f-display: "Unbounded", "Arial Black", Arial, sans-serif;
  --f-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ── Fluid type scale. Unbounded runs wide, so display sizes sit
     lower than a condensed or serif face would need. ─────────── */
  --t-hero:  clamp(2.05rem, 0.85rem + 4.15vw, 4.7rem);
  --t-state: clamp(1.85rem, 0.9rem + 3.2vw, 3.85rem);
  --t-h2:    clamp(1.5rem, 0.95rem + 1.75vw, 2.6rem);
  --t-h3:    clamp(1.5rem, 1.2rem + 0.55vw, 1.75rem);   /* >= 24px: bright orange is legal here */
  --t-lead:  clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --t-body:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-sm:    0.9375rem;
  --t-label: 0.75rem;

  /* Display tracking: wide faces want it pulled in, harder as they grow. */
  --tr-display: -0.035em;
  --tr-head: -0.03em;

  /* On orange: the WCAG large-text floor, and nothing under it. */
  --t-o-body:  1.5rem;      /* 24px regular */
  --t-o-label: 1.1875rem;   /* 19px, set at 700 */

  /* ── Rhythm (tight inside groups, generous between them) ── */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.375rem;
  --s-4: 2.125rem;
  --s-5: 3.25rem;
  --s-6: 5rem;
  --s-7: 7.5rem;
  --s-8: clamp(5rem, 2.6rem + 8.5vw, 11rem);

  /* ── Layout ─────────────────────────────────────────────── */
  --wrap: 1320px;
  --gut: clamp(1.25rem, 0.6rem + 2.8vw, 4.5rem);
  --scroll-offset: 0px;   /* no fixed bar, so anchors land flush */

  /* ── Motion ─────────────────────────────────────────────── */
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-io:  cubic-bezier(0.77, 0, 0.175, 1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 420ms;

  /* ── Elevation: offset + blur, tinted to the hue ─────────── */
  --e1: 0 1px 2px rgb(var(--shade) / 0.16), 0 6px 18px -6px rgb(var(--shade) / 0.28);
  --e2: 0 2px 6px rgb(var(--shade) / 0.18), 0 18px 44px -14px rgb(var(--shade) / 0.42);

  --radius: 2px;

  /* grain for the orange field (4-ish% burnt speckle) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.43  0 0 0 0 0.09  0 0 0 0 0.02  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");

  /* ── Scrollcraft engine roles, mapped onto ours ─────────── */
  --sc-canvas:      var(--white);
  --sc-surface:     var(--white);
  --sc-ink:         var(--orange-ink);
  --sc-ink-soft:    var(--orange-ink);
  --sc-accent:      var(--orange-ink);
  --sc-accent-ink:  var(--white);
  --sc-font-display: var(--f-display);
  --sc-font-text:    var(--f-text);
  --sc-font-mono:    var(--f-mono);
  --sc-shadow-color: 12 93% 22%;
}

/* ── Grounds ─────────────────────────────────────────────────
   Restating `color` matters: colour inherits as a computed value,
   so redefining --ink alone would leave text inked for the ground
   above it (scroll-craft taste.md, "Colour"). */
[data-ground="white"] {
  --ground: var(--white);
  --ink: var(--orange-ink);
  --display: var(--orange);
  --line: rgb(204 53 16 / 0.16);
  --line-strong: rgb(204 53 16 / 0.34);
  --focus: var(--orange-ink);
  --sel-bg: var(--orange);
  --sel-ink: var(--white);
  background-color: var(--ground);
  color: var(--ink);
}

[data-ground="orange"] {
  --ground: var(--orange);
  --ink: var(--white);
  --display: var(--white);
  --line: rgb(255 255 255 / 0.4);
  --line-strong: rgb(255 255 255 / 0.75);
  --focus: var(--white);
  --sel-bg: var(--white);
  --sel-ink: var(--orange-ink);
  color: var(--ink);
  /* the OS1 field: 4% grain over the vermilion, so it reads as a
     lit surface rather than a flat fill */
  background-color: var(--ground);
  background-image: var(--noise);
}

/* ── The engine's act progress ───────────────────────────────
   The engine writes --sc-p on every act, every frame. As an ordinary
   custom property it inherits, so each write restyles the act's whole
   subtree (the five process worlds are a large one). Nothing reads it
   below the act itself (.close__cta derives --draw-c on its own
   element), so it is registered as non-inheriting. syntax '*' keeps
   var(--sc-p, 1) falling back when the engine never ran. */
@property --sc-p {
  syntax: '*';
  inherits: false;
}