/* ==========================================================================
   Balerion — Design tokens
   Direction: Dragonfire. Warm-black ground, ember accent, zero radius.
   Ports straight into the child theme as-is.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Surface ───────────────────────────────────────────── */
  --void:    #0A0805;   /* deepest ground: card interiors, stamps, footer */
  --bg:      #14110D;   /* page background — the brand colour, not black  */
  --bg-2:    #1A1610;   /* raised panels, nav                             */
  --bg-3:    #241F17;   /* hover states, nested panels                    */
  --line:    #332E24;   /* 1px dividers, card borders                     */
  --line-2:  #4A4334;   /* ghost button borders, active dividers          */

  /* ── Ink (all AA-compliant on --bg) ────────────────────── */
  --ink:     #F2EEE4;   /* 16.25:1 — headlines, body                      */
  --ink-2:   #B7AE9C;   /*  8.56:1 — lede, secondary                      */
  --ink-3:   #8A8274;   /*  4.95:1 — captions, mono labels                */

  /* ── Ember ─────────────────────────────────────────────── */
  --red:     #EF2A3C;   /*  4.54:1 — stat numerals, markers, icon strokes */
  --orange:  #F87843;   /*  6.95:1 — primary CTA, focus ring, progress    */
  --peach:   #F4B183;   /* 10.27:1 — rare highlight, data values          */
  --ember:   linear-gradient(100deg, var(--red) 0%, var(--orange) 100%);
  --heat:    radial-gradient(60% 80% at 50% 100%,
               rgba(248,120,67,.20) 0%, rgba(239,42,60,.08) 40%, transparent 72%);

  /* ── Type ──────────────────────────────────────────────── */
  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Archivo is variable — width is a real design lever, not a fallback. */
  --display-wdth: 112;
  --display-wght: 800;

  /* ── Scale ─────────────────────────────────────────────── */
  --t-mono: 11.5px;
  --t-body: 15.5px;
  --t-lede: clamp(16px, 1.1vw, 19px);
  --t-h3:   clamp(19px, 1.5vw, 23px);
  --t-h2:   clamp(30px, 4vw, 58px);
  --t-h1:   clamp(34px, 7.1vw, 104px);

  /* ── Space & motion ────────────────────────────────────── */
  --gut:    clamp(20px, 4vw, 56px);
  --wrap:   1320px;
  --sec-y:  clamp(72px, 10vw, 148px);

  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .7s;

  --nav-h: 72px;

  /* ── Radius ────────────────────────────────────────────── */
  /* Phase 0 locked this at zero. The client reads a hard 90-degree corner as
     machine-generated and pointed at bluebik.com, which sits panels at ~10px
     and runs a full pill on the primary button. Matched here, as tokens, so
     the decision lives in one place if it moves again. */
  --r-sm:   6px;      /* chips, inputs, small media                      */
  --r:     10px;      /* panels, cards, image frames                     */
  --r-pill: 999px;    /* buttons                                         */

  /* Primary button ink. Black reads on the bright ember; on paper the ember
     darkens to clear AA, so the ink has to flip with it. */
  --btn-fg:       #000;
  --btn-fg-hover: var(--ink);
}

/* ── Paper ───────────────────────────────────────────────────
   The same design system with its surfaces inverted, not a second stylesheet.
   Sections that carry a checklist rather than a mood run light so procurement
   can scan them; only the tokens change, and every rule downstream already
   reads tokens, so nothing else needs a light variant.

   Every value measured against --bg. The ember had to darken: #EF2A3C reaches
   only 4.14:1 on paper, which fails AA at body size. */
.on-paper {
  color-scheme: light;

  --void:   #E6E0D3;
  --bg:     #F3EFE7;
  --bg-2:   #EBE5DA;
  --bg-3:   #E1DACD;
  --line:   #D4CCBB;
  --line-2: #B3A992;

  --ink:    #17130D;   /* 16.13:1 */
  --ink-2:  #4C4437;   /*  8.36:1 */
  --ink-3:  #6E6553;   /*  5.02:1 */

  --red:    #C01026;   /*  5.48:1 */
  --orange: #B23C08;   /*  5.17:1 */
  --peach:  #7E4416;   /*  6.72:1 */
  --ember:  linear-gradient(100deg, var(--red) 0%, var(--orange) 100%);

  --btn-fg:       #FFF5EC;   /* 5.51:1 on --orange */
  --btn-fg-hover: #FFF5EC;   /* 5.84:1 on --red    */

  background: var(--bg);
  color: var(--ink);
}

/* Cutting Selected work left What we do and In their words next to each other,
   two paper sections in a row, which reads as one long block with a hairline
   through it. The second one sits a step deeper so the boundary is a change of
   plane rather than a border: 1.14:1 against the paper above it, enough to see
   as a surface, not enough to read as a stripe.

   Dropping the ground costs contrast rather than buying it - dark ink on a
   darker paper is a smaller gap, not a bigger one - so the three tokens that
   were already closest to the line come down with it. Measured against this
   scope's own --bg-2, which is the card ground and the worst case here. */
.on-paper--deep {
  --bg:     #E7E0D3;
  --bg-2:   #E0D8C9;
  --bg-3:   #D8CFBE;
  --line:   #CAC1AE;
  --line-2: #ADA28B;

  --ink-3:  #5E5645;   /* 5.13:1 on --bg-2, was 4.29 at the .on-paper value */
  --red:    #AE0E22;   /* 5.14:1 */
  --orange: #9C3507;   /* 5.07:1 */
}

/* Long words in the display face overflow narrow screens at full width.
   Narrowing the variable width axis keeps the type large instead of shrinking it. */
@media (max-width: 760px) { :root { --display-wdth: 88; --nav-h: 62px; } }
@media (max-width: 440px) { :root { --display-wdth: 80; } }