/* ============================================================================
   DESCRN -- shared design foundation.  Session 43, Phase 1.

   THE POINT OF THIS FILE: before it existed, every page carried its own copy of
   the design tokens in an inline <style>. Thirteen copies drifted from the
   fourteenth, which is how the product ended up running two different visual
   systems at once (the Session 36 homepage vs. everything else) and why the
   previous redesign attempt "looked the same" -- it restyled inside the old
   token values instead of replacing them. Tokens now live here and nowhere
   else. Pages keep their own component CSS inline; only the vocabulary is
   shared.

   RULES
   - Do not redeclare these tokens in a page's inline <style>. A page-level
     :root wins over this file (same specificity, later in the cascade) and
     silently reintroduces the drift this file exists to end.
   - Component styling still belongs in the page. This file is vocabulary,
     not components.
   - Legacy aliases below (--border, --accent2, --red ...) are kept so 17,000
     lines of existing page CSS keep working untouched. New work should prefer
     the canonical names (--line, --accent-press, --neg).
   ========================================================================== */

/* ── TYPE ────────────────────────────────────────────────────────────────
   Self-hosted, single origin, already shipping on index.html since Session 36.
   Inter Tight is variable and carries 400-700 in one file. IBM Plex Mono
   carries every number, identifier, code and timestamp in the product: the
   house rule is that anything a person would compare, reconcile or copy into
   a government form is set in mono with tabular figures.
   ------------------------------------------------------------------------ */
@font-face{font-family:'Inter Tight';src:url('/fonts/inter-tight-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ── SURFACES ──────────────────────────────────────────────────────────
     Four measured steps rather than one flat ground, so stacked objects read
     as layers instead of relying on a border to separate them.            */
  --bg:#05080c;
  --bg2:#0c121b;
  --bg3:#141c28;
  --bg4:#1d2735;
  --surface2:#141c28;   /* used in deal.html; was never defined anywhere before */

  /* ── HAIRLINES ─────────────────────────────────────────────────────────
     --line/--line2 are translucent so a rule reads correctly on whichever
     surface sits behind it. Prefer these for new work.

     --border/--border2 are the legacy names and are deliberately SOLID
     equivalents, not aliases. 28 existing declarations use them to FILL a
     shape rather than draw a line -- milestone dots, progress tracks, step
     markers, the escrow bar. A translucent value is correct for a 1px rule
     and washes out badly on a filled 10px dot, so the legacy names keep a
     solid colour matched to how these read on --bg2.                      */
  --line:rgba(151,173,200,0.13);
  --line2:rgba(151,173,200,0.24);
  --border:#1e2733;
  --border2:#2b3644;

  /* ── TEXT ──────────────────────────────────────────────────────────────
     --text3 is the quietest tier and still clears 4.5:1 on --bg and --bg2. */
  --text:#eaf0f6;
  --text2:#a3b3c7;
  --text3:#7b8da2;

  /* ── ACCENT ────────────────────────────────────────────────────────────
     Reserved for actions and verified states, never decoration. Buttons put
     dark ink on the green (--accent-ink): white on this green is roughly
     2.5:1 and fails, dark ink is ~9:1 and reads as deliberate rather than
     defaulted. --accent2 is the legacy hover name and now lightens on press,
     matching the homepage.                                                */
  --accent:#1fb887;
  --accent-press:#28c795;
  --accent2:#28c795;
  --accent-ink:#04150e;
  --accent-dim:rgba(31,184,135,0.10);

  /* ── SEMANTIC DATA COLOURS ─────────────────────────────────────────────
     Separate from the accent on purpose: --pos is "this number went up" or
     "this is verified", which is a different statement from "click here".
     --red/--neg are the same hue; --red-dim keeps the old fill name.      */
  --pos:#34d399;
  --neg:#e0606a;
  --red:#e0606a;
  --red-dim:rgba(224,96,106,0.11);
  --amber:#fbbf24;
  --amber-dim:rgba(251,191,36,0.10);

  /* ── IDENTITY COLOURS ──────────────────────────────────────────────────
     Reputation purple is a real product component and keeps its identity;
     admin purple marks the read-only admin surfaces; blue/us carry the US
     waitlist story.                                                       */
  --purple:#534AB7;
  --purple-dim:#1a1830;
  --admin:#c084fc;
  --admin-dim:#2e1065;
  --blue:#3b82f6;
  --blue-dim:#0f1f3d;
  --us:#3b82f6;
  --us-dim:#1e3a5f;
  --us-light:#93c5fd;

  /* ── TYPE STACKS ───────────────────────────────────────────────────── */
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── GEOMETRY ──────────────────────────────────────────────────────────
     One locked radius scale. The codebase had sixteen different values;
     these four are the only ones new work should use.                     */
  --r-s:6px;
  --r-m:10px;
  --r-l:16px;
  --r-full:999px;
  --container:1080px;

  /* ── ELEVATION ─────────────────────────────────────────────────────────
     Depth comes from light and shadow, not from another border. Reserve
     --elev for the single most important object in a view.                */
  --elev:0 1px 0 rgba(255,255,255,0.04) inset,0 1px 2px rgba(0,0,0,0.55),0 16px 40px rgba(0,0,0,0.35);
  --elev-s:0 1px 0 rgba(255,255,255,0.03) inset,0 1px 2px rgba(0,0,0,0.4);
}

/* ── BASE ────────────────────────────────────────────────────────────────
   Deliberately minimal: pages still own their own layout and components.
   Everything here is either a typographic default that should be true
   everywhere, or an accessibility floor.
   ------------------------------------------------------------------------ */
body{
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Numbers line up in columns wherever they are set in mono. */
.mono,code,pre,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}

::selection{background:rgba(31,184,135,0.28)}

/* Keyboard focus was visible on the homepage only. It is now a floor for the
   whole product -- 119 clickable divs still need to become real buttons
   (Phase 2), but anything already focusable at least shows where it is. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* iOS Safari zooms the whole page when a focused control is under 16px, and does not
   zoom back out. Every page in the product set its inputs to 13px or 14px, so tapping
   any field on an iPhone -- signing in, adding a batch, filling a permit number --
   threw the layout out and left it that way.

   This is the same category as the :focus-visible rule above: a floor, not a style
   choice, which is why it lives here rather than being restated in ten inline
   stylesheets. !important is deliberate and load-bearing -- page rules are class
   selectors (`.form-input{font-size:13px}`) and would otherwise win on specificity,
   and a page must not be able to reintroduce the bug by accident. Checkboxes and
   radios are excluded: their size comes from the box, not the text. */
@media (max-width: 768px){
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{font-size:16px!important}
}