/* assets/tokens.css — the single source for The Ontology's design tokens.
 *
 * The eleven palette entries and the two font stacks below ARE the design spec's §4.2 palette table
 * and §4.3 type rules (docs/superpowers/specs/2026-09-14-ontology-launch-design.md). Everything after
 * them is derived from those eleven: an alpha ramp per hue, the two translucent surfaces, and the one
 * hover shade. Nothing new is invented here — no hue that is not in the table.
 *
 * All three surfaces consume this file rather than restating it (audit M19: the copies used to be kept
 * in sync by hand, with nothing to catch a drift):
 *   - the public site   <link rel="stylesheet" href="/assets/tokens.css"> before site.css
 *   - enroll/           @import '../../assets/tokens.css' at the top of enroll/src/styles.css
 *   - desk/desk.html    <link rel="stylesheet" href="/assets/tokens.css"> before its own <style>
 * Each of those three then defines only what is genuinely its own: --maxw (a different measure per
 * surface, which is why it is NOT here — one name must never mean two widths), and the desk's
 * operator-only --warn / --modal-scrim.
 *
 * Two values also have to exist in JavaScript: the Privy modal's accent and the QR code's two colours.
 * They live in enroll/src/theme.ts, which mirrors this file; tests/tokens.test.mjs parses both and
 * fails if they ever disagree. Add a JS-visible colour there, never as a literal at its call site.
 *
 * Plain rgba() literals, one definition each, rather than color-mix(): the public site has no build
 * step and no stated browser floor, so the alpha steps are spelled out here once and referenced
 * everywhere else. Adding a step means adding it here.
 */
:root{
  /* ---- spec §4.2 palette (the oracle; tests/tokens.test.mjs reads the hexes out of the spec table) ---- */
  --ink:#06080F;                    /* page ground */
  --ink-2:#0B1020;                  /* panels */
  --blue:#2F80FF;                   /* primary, links, buttons */
  --blue-deep:#1F5FD6;              /* hover, gradients */
  --ice:#9BE1FF;                    /* highlights, data accents */
  --glow:#CFF3FF;                   /* glints, focus rings */
  --white:#F4F7FB;                  /* text */
  --slate:#8A96A8;                  /* secondary text */
  --rule:rgba(155,225,255,.18);     /* hairlines */
  --up:#3DDC97;                     /* positive change */
  --down:#FF6B6B;                   /* negative change */

  /* ---- spec §4.3 type ---- */
  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- derived solids ---- */
  /* One step darker than --ink-2, for a panel that has to read as a layer above another panel: the
     desk's toast and the chain avatar's flat tile. Both surfaces used to spell it #111a33 separately. */
  --ink-3:#111a33;
  /* The :hover shade under --blue-deep on a filled primary button. All three surfaces had it as a
     bare #174AAD (audit M10 / M20 / desk L15). */
  --blue-deep-hover:#174AAD;

  /* ---- boundaries ---- */
  /* --rule is a HAIRLINE: dividers, card outlines, table rules, decorative frames. It computes to
     1.53:1 on --ink-2 and 1.46:1 on --ink, which is correct for a divider and wrong for a control.
     --rule-control is the same ice at .42 alpha: 3.19:1 on --ink-2, 3.14:1 on --ink, clearing the 3:1
     WCAG 1.4.11 asks of a UI component boundary (audit H4 — on these surfaces the field fill is only
     1.06:1 against the page, so the border is the whole affordance). Use it on form controls
     (input/select/textarea borders, slider tracks), on action borders (secondary/mini/answer buttons)
     and on state rings. tests/tokens.test.mjs recomputes both ratios. */
  --rule-control:rgba(155,225,255,.42);

  /* ---- translucent surfaces ---- */
  --scrim:rgba(6,8,15,.72);         /* sticky nav, sheet backdrop — --ink over blurred content */
  --scrim-strong:rgba(6,8,15,.85);  /* the desk's denser top bar */
  --panel:rgba(11,16,32,.85);       /* --ink-2 as a tile/CA-box fill that lets the hero graph through */
  --ink-0:rgba(6,8,15,0);           /* the transparent end of an --ink gradient (Safari needs the hue) */

  /* ---- disabled state ---- */
  /* The one alpha a disabled control dims to, so "disabled" reads the same everywhere and reads at all
     (audit L6: on the public site "disabled" is the SHIPPED default for the whole pair calculator —
     pre-launch, and again any time /api/onto fails — so it is a resting state a reader spends real time
     with, not a momentary one). At the old .4 the ice blanks computed to 2.94:1 and the slate Reset to
     1.95:1 against --ink. .6 is the LOWEST step (in .01) at which both clear the 3:1 a disabled control
     still has to reach to be legible: ice 5.37:1, slate 3.02:1. WCAG 1.4.3 exempts a disabled control
     from the text minimum; this is not a compliance number, it is the number that makes the resting
     state readable. tests/tokens.test.mjs recomputes both.
     A number, not a colour, deliberately: opacity dims a control's text, its border and its thumb
     together, which is what keeps the whole thing reading as one disabled object rather than three
     separately-dimmed parts. */
  --disabled-alpha:.6;

  /* ---- alpha ramps (only the steps actually in use) ---- */
  --ice-08:rgba(155,225,255,.08);   /* pressed-asset fill */
  --ice-14:rgba(155,225,255,.14);   /* constellation rings */
  --ice-22:rgba(155,225,255,.22);   /* verified card halo */
  --ice-25:rgba(155,225,255,.25);   /* card outline */
  --ice-32:rgba(155,225,255,.32);   /* constellation edges */
  --ice-35:rgba(155,225,255,.35);   /* badge outline */
  --ice-50:rgba(155,225,255,.5);    /* emphasised chip outline, control hover */
  --blue-35:rgba(47,128,255,.35);   /* gem glow, thumbnail wash */
  --blue-45:rgba(47,128,255,.45);   /* constellation gem glow */
  --glow-50:rgba(207,243,255,.5);   /* focus halo around the slider thumb */
  --white-35:rgba(244,247,251,.35); /* official-account chip outline */
  --up-40:rgba(61,220,151,.4);      /* believer chip outline */
  --up-50:rgba(61,220,151,.5);      /* live pill outline (desk) */
}