/* Design tokens of the public site — the "Ledger mint" palette.
 *
 * The values are carried over one for one from the approved mock-ups
 * (`Main.dc.html`, `Home-Mobile.dc.html`, `Header-Footer.dc.html`, the `:root`
 * block). Nothing has been added or picked by eye: a token that is not in a
 * mock-up means the page has drifted from what was approved — and that can
 * only be seen by looking at the live site.
 *
 * The radius is 2px everywhere. The palette has no shadow at all: things are
 * separated by lines, not by shadows.
 */

:root {
  /* Surfaces */
  --bg: #090C0B;
  --surface: #111514;
  --surface2: #151A18;
  --hover: #171C1A;

  /* Lines */
  --line: #24302A;
  --lineS: #1A211E;

  /* The fill of the hero's "burn" bar — the one our price is compared against.
     The value came from `site.css`, where it sat as a literal outside the whole
     palette; the site is already live, so the colour was carried over as it was
     rather than replaced by its nearest neighbour. If the mock-up gives this
     bar a different colour, it is fixed here and the page follows the token by
     itself. */
  --barBurn: #29352F;

  /* Text */
  --text: #E7EDEA;
  --muted: #A3B0AA;
  /* `--dim` was #76837D, which measured 4.45:1 on `--surface2` — under the
     4.5:1 AA floor for normal text, and it is the colour of every table
     header, every table note and, until 2026-09-18, every dollar figure, all
     of them at 10–12px. The pair lighthouse names is exactly this one.

     Lifted three 8-bit steps, which is the darkest value on this colour's own
     ray that clears 4.5:1 on every surface token in the palette rather than
     only on the three it is used over today:

       --bg #090C0B      5.177
       --surface #111514 4.850
       --surface2 #151A18 4.640
       --hover #171C1A   4.542   (nothing dim sits on it — a margin, not a use)

     Three steps and not one. One step (#77847E) clears `--surface2` by 0.015,
     and one 8-bit step of a *ground* moves the ratio by about 0.046 — so the
     literal minimum is a value that goes back under the floor the next time a
     surface is nudged, while looking identical to the value that failed.
     `site/tests/contrast.test.js` holds the three grounds at 4.5. */
  --dim: #798680;

  /* The chart's axis type, and the only ink on this site that exists for one
     element. It has to be two things at once, and no token already in the
     palette is both.

     Quiet enough not to read as data. The picture plots two series — `--accent`
     for the price and `--muted` for the second line — and the labels down the
     left were `--muted` too, the same ink at the same weight as a plotted
     line: the axis was drawn in the colour of a series, which is the one
     colour it may not be.

     And legible over what is behind it, which is not a surface but a
     translucent zone band over a card (see `.chart-label` in `site.css`).
     `--dim` is under 4.5:1 there by three thousandths. So this sits between
     the two, on the same ray: it clears the worst band-over-card blend with
     room, and it is plainly not `--muted` beside a `--muted` line.
     `site/tests/contrast.test.js` measures it over every band on every card
     ground and holds it apart from every stroke the chart plots. */
  --axis: #8E9B95;

  /* Accent */
  --accent: #3FD8A8;
  --accentH: #66E3BC;
  --accentInk: #06251B;
  --accentSoft: #0E2A21;

  /* Statuses */
  --info: #74A9F5;
  --infoSoft: #12222E;
  --ok: #4FC98F;
  --okSoft: #0E271C;
  --warn: #E0A73C;
  --warnSoft: #2A2312;
  --danger: #F2705F;
  --dangerSoft: #2E1814;
  --neutral: #8B98A2;

  /* Fonts. The system tails are not decoration: until the woff2 has arrived,
     the page is set in them (`font-display:swap` in fonts.css). */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry */
  --radius: 2px;
  --wrap: 1180px;
}

/* Scripts we do not vendor.
 *
 * Chinese and Devanagari are megabytes of glyphs even after subsetting, and no
 * amount of `unicode-range` makes that cheap for the visitor who actually reads
 * those pages — they would download all of it. So these two locales are set in
 * whatever the reader's own system already has, which is the same choice the
 * cabinet made (`web/assets/tokens.css`) and has been serving zh and hi for
 * months.
 *
 * "IBM Plex Sans" stays at the head of every stack on purpose: Latin runs
 * inside a Chinese or Hindi page — prices, TRX, the API examples — keep the
 * face the rest of the site uses, because fallback is resolved per character,
 * not per element. Only the characters Plex has no glyph for reach the system
 * font named after it.
 *
 * Russian and Vietnamese are deliberately absent here: those two are vendored
 * (Cyrillic and Latin3 subsets, `fonts/fonts.css`) and must not be handed to a
 * system face.
 */
html:lang(zh) {
  --sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
}

html:lang(hi) {
  --sans: "IBM Plex Sans", "Noto Sans Devanagari", "Nirmala UI", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Devanagari", "Nirmala UI", monospace;
}