/* ==========================================================================
   Design tokens — dark "console" palette + light "blueprint" overrides.
   Every other stylesheet reads from these custom properties; change a brand
   colour or type ramp here and it propagates everywhere.
   ========================================================================== */

:root{
  --bg:#04070b; --panel:#081019; --ink:#e9f3f2;
  --muted:rgba(233,243,242,.62); --faint:rgba(233,243,242,.50);
  --line:rgba(233,243,242,.12); --accent:#3fe0c5; --amber:#ffb054;
  /* The blueprint grid in atmosphere.css draws with this rather than --line:
     ambient texture and structural borders are different jobs, and the light
     theme needs to raise one without dragging up the other. */
  --grid-line:rgba(233,243,242,.12);
  --duo-rgb:4,7,11; --media-bg:#0a1420; --elev:#0a1119; --hover:#0c1622; --backdrop:2,5,8;
  /* Semantic failure state, and the only colour on this site that is not
     brand. --accent means "ours" and --amber means "pay attention"; neither
     can carry "this is broken" without teaching the reader the wrong thing
     about both. Used by the SYS.01 incident panel. */
  --alert:#ff6f61;
  /* Ink used ON the accent fill. Dark theme's accent is bright, so it takes dark
     ink; the light theme's accent is a deep green and needs light ink — dark on
     dark measured 3.35:1 on the primary button. */
  --on-accent:#04110c;
  /* Field borders are the only thing identifying an input, so they answer to
     WCAG 1.4.11 (3:1) rather than to --line, which is decorative and stays
     deliberately faint. 0.37 / 0.46 are the measured minimums for 3:1. */
  --field-line:rgba(233,243,242,.37);
  --blend-ink:#e9f3f2; /* fixed light tone for mix-blend-difference layers */
  /* ---- type roles ----------------------------------------------------
     FOUR roles, not three. --body is the reading face and it is new; until
     it existed base.css set the whole document in --mono, which meant every
     paragraph, answer, label and button on the site was monospaced. That is
     the typographic signal for "a machine is talking", and it is why the
     site read as built for engineers rather than for the people who buy
     from us.

     Measured against eleven comparable companies -- Computacenter, Softcat
     and Rackspace among them, plus Stripe, Cloudflare, GitHub, Vercel and
     Linear -- NONE sets body copy in a monospaced face. All still use mono,
     but only for what is literally code, a shortcut or an identifier. Mono
     keeps that job here too; see the readout list in base.css.

     --display stays Syne deliberately. The wordmark is live text in this
     face and logo.css's .lg-type gap is measured in Syne 800, so changing
     it changes the logo and invalidates the boot clamp in docs/BRAND.md.
     The display face was never the problem. */
  --display:"Syne", "Arial Black", sans-serif;
  --headline:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --stacktop:13vh; --stackstep:26px;

  /* ---- type scale ----------------------------------------------------
     Every mono/UI size in the stylesheets resolves to one of these five
     steps. Floors were raised so the smallest label clears 11px and body
     copy sits at 15px — IBM Plex Mono has a tall x-height, so 15px mono
     reads about the size of 16px sans. */
  /* The first three steps used to be 11 / 11.5 / 12 -- three "steps" inside
     one pixel, which is not a ramp, it is rounding noise. Nothing could be
     read as deliberately smaller or larger than its neighbour, so the levels
     carried no meaning and picking between them was a coin toss.
     11 / 12 / 13 keeps the same floor and makes each step visible. */
  --fs-2xs:11px;    /* micro labels: SYS readouts, key/value keys, captions */
  --fs-xs:12px;     /* eyebrow tags, meta rows, stat labels, section notes */
  --fs-sm:13px;     /* nav, buttons */
  --fs-md:13.5px;   /* dense secondary copy, footer links */
  --fs-base:15px;   /* body copy */
  /* Prose in --body needs the ramp lifting. The steps above were floored
     against IBM Plex Mono, whose x-height is 0.516em; Source Sans 3 sits at
     0.486em, so the same pixel size reads ~6% smaller. 1.075 is that ratio
     with a little in hand, measured rather than nudged. Applied only to
     running prose -- readouts stay on the raw steps, because they are still
     set in mono and must keep their column widths. */
  --prose-adj:1.075;
  --fs-prose:calc(var(--fs-md) * var(--prose-adj));   /* 14.5px */
}
/* ===== light "blueprint" theme =====
   Built as a ladder, not a wash. The paper sits at 0.787 relative luminance
   (it was 0.850, which left only 15% of the range above it, so panels had
   nowhere to go and the page read as one flat field). Panels now climb toward
   white and image wells drop below the paper, which opens the separation from
   1.09:1 to 1.19-1.27:1. The structural hairline goes from 1.40:1 to 1.94:1 -
   the single biggest gain, since these lines carry most of the page's
   structure. Accent and amber are deepened to hold their contrast on the
   deeper paper. */
[data-theme="light"]{
  --bg:#e3e7dd; --panel:#f8faf4; --ink:#0b1512;
  --muted:rgba(11,21,18,.74); --faint:rgba(11,21,18,.62);
  --line:rgba(11,21,18,.30); --grid-line:rgba(11,21,18,.15);
  --accent:#00654f; --amber:#7d4a00;
  --duo-rgb:227,231,221; --media-bg:#c9cfc4; --elev:#ffffff; --hover:#d5dace; --backdrop:22,26,20;
  --on-accent:#f8faf4; --field-line:rgba(11,21,18,.50);
  --alert:#9e2116;          /* deeper, to hold ~6:1 on the light panel */
}
[data-theme="light"] .grain{ opacity:.035; }
[data-theme="light"] .gridlay{ opacity:.62; }