/* ============================================================================
   HIVEMIND — DESIGN TOKENS
   One hue. One type ratio. One 6px spacing step. Nothing else is allowed in.

   Register: precise, engineered, slightly severe. The product would rather say
   nothing than guess, so the page never shouts: hierarchy is built by taking
   contrast away from the secondary, never by inflating the primary.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FACES
   Two families, both self-hosted (no third-party request, no swap flash).
   Fallbacks are metric-matched: size-adjust / ascent-override / descent-override
   were measured against the real faces (Archivo 400 advance = 99.08% of Arial;
   Azeret Mono advance = 107.96% of DejaVu Sans Mono) so a swap moves nothing.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99.08%;
  ascent-override: 88.8%;
  descent-override: 21.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/azeret-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Fallback";
  src: local("DejaVu Sans Mono"), local("Menlo"), local("Consolas"), local("Courier New");
  size-adjust: 107.96%;
  ascent-override: 87.1%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

:root {
  --font-sans: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-mono: "Azeret Mono", "Azeret Fallback", ui-monospace, monospace;

  /* -------------------------------------------------------------------------
     2. TYPE SCALE — the reference's own scale, all rem.

       caption   12   Azeret 400  +0.08em  uppercase
       label     14   Azeret 500  +0.025em uppercase
       body      18   Archivo 200          ← THE signature: not 400, not 16px
       h3        27   Archivo 400
       subhead   36   Archivo 400
       h2-sm     42   Archivo 400  -0.04em
       h2        48   Archivo 400  -0.04em
       h2-lg     78   Archivo 400  -0.04em
       display  113   Archivo 400  -0.04em -> clamp(46, 9vw, 113), rem term kept

     Seven distinct sizes: 12 / 14 / 18 / 27 / 36 / [h2 fluid 42-78] /
     [display fluid 46-113]. Hierarchy is scale and tracking, never weight — 400
     does every display size and 200 does all body copy. Section headings and the
     hero display are fluid ranges over the top of the scale, each keeping a rem
     term so browser zoom still enlarges them.
     ------------------------------------------------------------------------- */
  --fs-caption: 0.75rem;                                   /* 12 */
  --fs-label: 0.875rem;                                    /* 14 */
  --fs-body: 1.125rem;                                     /* 18  — the signature */
  --fs-lead: var(--fs-body);                               /* lead is body, at a wider measure */
  --fs-h3: 1.6875rem;                                      /* 27 */
  --fs-subhead: 2.25rem;                                   /* 36 */
  --fs-h2-sm: 2.625rem;                                    /* 42 */
  --fs-h2-md: 3rem;                                        /* 48 */
  --fs-h2-lg: 4.875rem;                                    /* 78 */
  --fs-display-lg: 7.0625rem;                              /* 113 */
  /* both ends of each fluid range are named steps on the scale; the vw term is
     what the reader meets — h2 renders 42-78 and display 46-113 across the
     viewport range, each capped at its top step. */
  --fs-h2: clamp(var(--fs-h2-sm), 4.2vw + 1rem, var(--fs-h2-lg));
  --fs-display: clamp(2.875rem, 8vw + 0.8rem, var(--fs-display-lg));

  /* leading — denser as the type grows. Body is 18/1.5 = 27 (a 3px, on the
     6px base unit); the display steps are close-set at 1.1. */
  --lh-caption: 1.5;      /* 18 at 12 */
  --lh-label: 1.2;        /* ~17 at 14 */
  --lh-body: 1.5;         /* 27 at 18 */
  --lh-lead: 1.5;         /* 27 at 18 */
  --lh-h3: 1.05;          /* 27/1.0 rounded up a hair so descenders clear */
  --lh-subhead: 1.15;
  --lh-h2: 1.1;
  --lh-display: 1.06;

  /* Tracking — negative only at 42px and up (the reference forbids it below),
     reaching -4.52px at 113px, which is -0.04em held across the display band.
     The small caps get positive tracking; body and the mid headings get none. */
  --track-caption: 0.08em;
  --track-label: 0.025em;
  --track-body: 0;
  --track-h3: 0;
  --track-subhead: 0;
  --track-h2: -0.04em;
  --track-display: -0.04em;

  /* weights — 400 does every display size; a headline is never bolded. 200 is
     the body weight and the page's airy tell — the reference's stated signature. */
  --w-air: 200;
  --w-body: 200;
  --w-display: 400;
  --w-mono: 400;
  --w-mono-strong: 500;

  /* -------------------------------------------------------------------------
     3. SPACE — one scale, 8 values, every one a multiple of the 6px base unit
     AND of 12, so every margin, padding and gap on the page also lands on a
     4px multiple. Steps widen with size (12 12 12 24 24 24 48).
     ------------------------------------------------------------------------- */
  --sp-1: 0.75rem;   /*  12 */
  --sp-2: 1.5rem;    /*  24 */
  --sp-3: 2.25rem;   /*  36 */
  --sp-4: 3rem;      /*  48 */
  --sp-5: 4.5rem;    /*  72 */
  --sp-6: 6rem;      /*  96 */
  --sp-7: 7.5rem;    /* 120 */
  --sp-8: 10.5rem;   /* 168 */

  /* section rhythm, block gaps and gutters step up with the viewport (mobile is
     the base). --rhythm is always >= 2x --gap-block, so the gap between two
     sections always reads larger than any gap inside one. */
  --rhythm: var(--sp-5);
  --gap-block: var(--sp-3);
  --gutter: var(--sp-2);
  --shell: 80rem;      /* 1280 */
  --measure: 34rem;    /* ~66 characters of body copy */
  --measure-lead: 40rem;
  --nav-h: 6rem;       /* 96 — a 48px action row inside 24px of block padding */

  /* -------------------------------------------------------------------------
     4. COLOR — one hue. Hierarchy comes from luminance, not from a second
     accent. The neutrals are warm-shifted on purpose: on a page lit by a single
     amber source, neutral grays read as a colder second palette.

     Measured on --void: bone 19.8:1, mist 11.0:1, ash 6.2:1, dim 4.6:1,
     groove 3.3:1, amber 13.0:1. Every one of them clears its WCAG bar as text
     (4.5:1) or, for --groove, as a non-text boundary (3:1). Nothing on this
     page dims text by compositing opacity onto it — a quieter role is always a
     quieter token, so the measured value is the designed value.
     ------------------------------------------------------------------------- */
  --void: #000000;
  --raised: #1c1813;   /* elevation on a dark theme is lightness, never shadow */
  --sunken: #2a251d;   /* form fields: the one surface that reads above its panel */
  --bone: #fbf8f2;     /* warm-shifted off pure white to sit on the same ramp */
  --mist: #bfbbb2;
  --ash: #8e8b84;
  --dim: #7a766e;      /* the quietest legible step: withheld, superseded, past */
  --groove: #635f59;   /* non-text only: meter tracks, slider rails */
  --amber: #ffc21f;

  /* semantic roles — one token change rethemes the page coherently.
     --interactive is the ONE role amber plays: filled actions, the focus ring,
     live values, and the comb. Emphasis that is not interactive uses the
     neutral ramp, so amber on this page always means "you can act on this,
     or this is live right now". */
  --bg-page: var(--void);
  --bg-raised: var(--raised);
  --bg-field: var(--sunken);
  --text-strong: var(--bone);
  --text-body: var(--mist);
  --text-muted: var(--ash);
  --text-dim: var(--dim);
  --line-quiet: var(--groove);
  /* A control's own boundary. A text field is identified by its box, so that box
     needs a real edge, and it has to hold 3:1 (SC 1.4.11) on BOTH sides in every
     state the field has — including the lighter hover and invalid fills, which
     is what rules the quieter --dim step out. Derived from the neutral ramp, so
     it is the same colour reasoning as every other line on the page. */
  --line-control: var(--ash);
  /* the one non-chrome role amber keeps: a value that is live right now (the
     serve floor readout, a served score). Everything decorative uses the ramp. */
  --text-accent: var(--amber);
  --interactive: var(--amber);
  --on-interactive: var(--void);
  /* both derived from the one accent, so the page still has exactly one hue */
  --interactive-hover: color-mix(in oklab, var(--amber) 84%, var(--bone));
  --wash: color-mix(in oklab, var(--amber) 14%, transparent);
  /* the page's one rule: the serve floor. Mixed from the accent rather than
     restated as a hex, so re-theming --amber re-themes the hairline with it.
     Half-strength amber measures 3.6:1 on the void — a non-text boundary that
     passes, which the brief's .14 alpha did not. */
  --hairline: color-mix(in srgb, var(--amber) 50%, transparent);
  --veil: rgba(0, 0, 0, 0.86);
  --focus-ring: var(--amber);

  /* comb ramps — the hexagon swarm only, never UI chrome. HUE encodes the trust
     classification of a fact; LUMINANCE within a ramp still carries depth, so the
     field spans distinct temperatures at once instead of one bronze-to-amber glow.
     Three warm tiers coexist:
       cold  deep yellow — provisional / quarantined, the quiet strata
       amber              — established / active (the brand hue)
       hot   orange       — the hottest, most-recalled cells
     A served recall fills with --comb-served (a live-right-now event) on any tier. */
  --comb-cold-0: #0f0c00;   /* unlit: the cell exists and says nothing */
  --comb-cold-1: #2a2600;
  --comb-cold-2: #524a06;
  --comb-cold-3: #897d12;
  --comb-cold-4: #cdb818;   /* deep yellow peak — the quiet strata */

  --comb-amber-0: #1c1200;
  --comb-amber-1: #4a3000;
  --comb-amber-2: #8a5a00;
  --comb-amber-3: #c98a05;
  --comb-amber-4: #ffc21f;  /* amber peak — the brand, established/active */

  --comb-hot-0: #180800;
  --comb-hot-1: #451800;
  --comb-hot-2: #863000;
  --comb-hot-3: #c84e04;
  --comb-hot-4: #ff6410;    /* hot orange peak — most-recalled */

  --comb-served: #ffe9a3;   /* the served-flash fill — live right now, any tier */

  /* legacy single-ramp aliases (literal, so any other reader still parses hex) */
  --comb-0: #1c1200;
  --comb-1: #4a3000;
  --comb-2: #8a5a00;
  --comb-3: #c98a05;
  --comb-4: #ffc21f;
  --comb-5: #ffe9a3;

  /* engineered substrate — the machined drafting graticule under the whole page.
     Painted into the hero canvas behind the field (so it survives the opaque
     repaint) and mirrored in CSS on the body for the sections below, so the page
     reads as one PCB surface. Amber at a whisper: it must never compete with type. */
  --substrate-pitch: 26px;
  --grid-minor: rgba(255, 194, 31, 0.026);
  --grid-major: rgba(255, 194, 31, 0.05);
  --grid-dot:   rgba(255, 194, 31, 0.08);

  /* -------------------------------------------------------------------------
     5. RADIUS — three tokens. Nested radius = outer minus its gap.
     ------------------------------------------------------------------------- */
  --radius-sm: 0.75rem;   /* 12 — nested inside a 24 panel with a 12 gap */
  --radius-lg: 1.5rem;    /* 24 — pills, panels, the canvas mask */
  --radius-pill: 62.4375rem;

  /* -------------------------------------------------------------------------
     6. MOTION — duration tiers by element size; exits run at --dur-exit, ~2/3
     of the matching entrance, and swap --ease-out for --ease-in so a thing
     leaving accelerates away instead of settling. Only transform and opacity
     are ever animated.
     ------------------------------------------------------------------------- */
  --dur-press: 120ms;   /* press feedback */
  --dur-hint: 160ms;    /* hover, colour shifts */
  --dur-menu: 220ms;    /* disclosure menu */
  --dur-panel: 300ms;   /* overlay + scroll reveal */
  --dur-exit: 200ms;    /* ~2/3 of --dur-panel */
  --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.85, 0.4);

  /* live gate state, written by gate.js and read by the floor rule + track fill */
  --tau: 0.7;
  --tau-pct: 70;
}

@media (min-width: 40rem) {
  :root { --gap-block: var(--sp-4); }
}

@media (min-width: 48rem) {
  :root {
    --rhythm: var(--sp-6);
    --gutter: var(--sp-3);
  }
}

@media (min-width: 64rem) {
  :root {
    --rhythm: var(--sp-8);
    --gap-block: var(--sp-5);
    --gutter: var(--sp-4);
  }
}