/* ============================================================================
   ADON DESIGN TOKENS
   The single definition of the dark terminal system: palette, type scale and
   spacing. Loaded by the static pages (public/*.html) and by the application
   shell (app.html), so a colour or a size is changed here and nowhere else.
   Pages must not re-declare these variables locally.
   ========================================================================= */

:root {
  /* ---- surface ---- */
  --bg: #0c0c11;
  --panel: #101017;
  --panel-2: #13131c;
  --line: #22232e;
  --line-2: #2c2d3a;

  /* ---- ink ----
     Four tiers of text and one of decoration. The tiers are set well ABOVE
     the 4.5:1 minimum, not at it: this is a mono face at 9–13px over a
     grained dark ground, and type that merely clears the threshold on paper
     reads as murk here. The quietest tier, --ink-faint, measures ~6.4:1 on
     --panel-2 (the darkest surface a word actually sits on); each tier above
     it is roughly 8.5:1, 11:1 and 14:1, which keeps the four visibly apart.

     Ratio is not the whole story. A light font-weight (300 or under) and
     `opacity` on a span of words both undo a colour that measures fine. A
     light weight is allowed on --ink, where the tier carries it; below that
     tier, set running text at the normal weight. Dim the token, never the
     text — `opacity` is for disabled controls and dividers only.

     --ink-ghost is NOT a text colour. It is for marks that carry no words —
     an unlit node on the map, an inert tick. Setting type in it renders it
     at 1.8:1, which is invisible rather than quiet. Reach for --ink-faint. */
  --ink: #e2e3ea;
  --ink-soft: #c4c6d1;
  --ink-dim: #aaacba;
  --ink-faint: #9295a3;
  --ink-ghost: #3a3b47;

  /* ---- signal ---- */
  --dot: #b4b6c6;
  --live: #7fd6a8;
  --alert: #d6a87f;
  --gold: #caa15a;
  --danger: #cf7a72;

  /* ---- atmosphere (scanline grain overlay) ---- */
  --grain: rgba(255, 255, 255, 0.012);
  --grain-blend: overlay;

  /* ---- type ---- */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs-micro: 9px;
  --fs-label: 10px;
  --fs-meta: 11px;
  --fs-small: 12px;
  --fs-body: 13px;
  --fs-lead: 15px;
  --fs-title: 18px;
  --fs-display: 22px;
  --ls-brand: 0.42em;
  --ls-head: 0.32em;
  --ls-label: 0.22em;
  --lh-body: 1.85;

  /* ---- spacing and measure ---- */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: 52px;
  --wrap: 1320px;

  /* ---- aliases kept for the application pages, which grew up with a
         different vocabulary for the same values ---- */
  --ink-mid: var(--ink-dim);
  --rule: var(--line);
  --rule-soft: #1a1b24;
  --paper: var(--panel);
}

:root[data-theme="light"] {
  --bg: #eceae4;
  --panel: #f4f2ed;
  --panel-2: #e7e4dd;
  --line: #d2cfc6;
  --line-2: #bdb9ad;

  /* Same rule inverted, and darkened by the same amount the dark theme was
     lightened: --ink-faint measures ~6.8:1 on --panel-2, the lightest
     surface a word sits on, with the tiers above it stepping up from there.
     --ink-ghost stays decoration. */
  --ink: #1c1b18;
  --ink-soft: #2a2823;
  --ink-dim: #3c3a34;
  --ink-faint: #4e4c45;
  --ink-ghost: #aaa69c;

  /* The signal colours are darkened for this theme, not reused from the dark
     one: they carry words (a status, a live marker) on a light surface, so
     each has to clear 4.5:1 on the darkest of these surfaces rather than
     merely read as the same hue. */
  --dot: #3a3a3a;
  --live: #2f6a4a;
  --alert: #8a5c30;
  --gold: #8a5c30;
  --danger: #a3473e;

  --grain: rgba(0, 0, 0, 0.015);
  --grain-blend: multiply;

  --rule-soft: #dedbd3;
}