/* ============================================================================
   OxOn — design tokens
   Derived from docs/BRAND-GUIDE.md. Change a value here, not at a call site.

   The palette is deliberately tiny: black, paper, aluminium, and Oxford Blue
   as an accent ONLY. The brand guide is explicit that core marks are
   monochrome — colour is not where this brand's personality lives.
   ========================================================================= */

:root {
  /* ── Brand palette (exact, from the brand guide) ───────────────────────── */
  --oxon-black:        #000000;
  --oxon-paper:        #f4f1ea;   /* warm editorial ground */
  --oxon-aluminium:    #b8b8b4;   /* equipment plates, hairline rules */
  /* ⛔ site.css says --alu in 13 places. Without this alias every one of those
     borders computed to `0px none` — ABSENT, not grey — so the hairline-rule
     grammar the whole design rests on never rendered once. Do not rename. */
  --alu:               var(--oxon-aluminium);
  --oxon-oxford-blue:  #1e3a5f;   /* small accent ONLY — never a surface */

  /* The OS's own semantic green, lifted from OxOnOS-UI-Template.html so the
     site and the product cannot drift apart. It means ONE thing on this page:
     the work stayed on your machine. It is never used for emphasis. */
  --oxon-local:        #20724a;
  --oxon-local-tint:   #e2eae2;
  /* Darkened from the OS template's #9a6b1f, which measures 3.75:1 on
     paper-deep and fails AA at label size. ⚠️ Deliberate divergence from
     OxOnOS — the OS is not read at 11px on paper. */
  --oxon-amber:        #835a19;
  --oxon-local-on-dark:#4aa574;   /* 6.53:1 — the green is 3.36 on the dark band */
  --oxon-amber-on-dark:#c9923a;   /* 7.22:1 */
  --oxon-amber-tint:   #f0e7d2;

  /* ⛔ THE ONLY COLOUR ON THE PAGE THAT IS NOT PAPER, INK OR A STATUS.
     The sixth dot on the machine, and the neon it opens. Founder,
     2026-09-04: "we lost our neon pinky purple hot spot on the box overlay
     for gta - its grey so it doesnt make users currently click." It is
     defined HERE rather than inline so the value cannot drift between the
     dot and the scene it opens — the dot is a promise of that colour. */
  --oxon-neon:         #ff2e88;

  /* ── Derived surfaces ─────────────────────────────────────────────────── */
  --paper:             var(--oxon-paper);
  --paper-deep:        #eae6dc;   /* panels on paper */
  --paper-raise:       #fbf9f4;   /* raised fields and figure grounds */
  --paper-edge:        #ded9cc;   /* hairlines on paper */
  --ink:               #14130f;   /* body text on paper — never pure black */
  --ink-soft:          #56524a;   /* secondary text on paper */
  /* ⛔ Was #8a857a: 3.26:1 on paper, 2.95:1 on paper-deep — below AA, and it
     carries the price, the confidence tags and the quadrant's axes. A page
     about honesty was printing its honesty in its faintest ink. */
  --ink-faint:         #6b665c;   /* 5.06 paper · 4.58 paper-deep */

  --dark:              #0a0a0a;   /* dark bands — a hair off pure black */
  --dark-deep:         #000000;
  --dark-panel:        #151513;
  --dark-edge:         #2a2a27;
  --on-dark:           #f4f1ea;
  --on-dark-soft:      #a8a49a;
  --on-dark-faint:     #858179;   /* was #6e6a62 — 3.68:1, below AA */

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Fluid scale. Display sizes are LIGHT weight — the brand guide asks for a
     calm neutral grotesk in light-to-regular. Heavy display type reads as
     consumer tech and breaks the "quiet, engineered" voice. */
  --t-display:  clamp(2.6rem, 1.4rem + 5.2vw, 6.4rem);
  --t-h1:       clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem);
  --t-h2:       clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
  --t-h3:       clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
  --t-lead:     clamp(1.06rem, 0.98rem + 0.42vw, 1.32rem);
  --t-body:     clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --t-small:    0.875rem;
  --t-micro:    0.75rem;   /* 12px — 11.2px made the contrast failure worse */

  --lh-display: 0.98;
  --lh-tight:   1.14;
  --lh-body:    1.62;

  /* The micro-label is a signature of this system: uppercase, tiny, and very
     widely tracked — the language of an equipment plate, not a web badge. */
  --track-label: 0.18em;   /* holds the plate voice at 12px */
  --track-display: -0.022em;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --gutter:     clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --section-y:  clamp(4.5rem, 2rem + 9vw, 10rem);
  --measure:    68ch;      /* max line length for body copy */
  --measure-display: 18ch; /* display headings want a SHORT measure */
  --max:        1240px;

  /* ── Line, radius, motion ─────────────────────────────────────────────── */
  --hair: 1px;
  --radius: 3px;           /* almost square. Rounded corners read as consumer. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 620ms;
}

/* Reduced motion is not an edge case — this page must be fully legible and
   fully complete with every animation switched off. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}