/* ⚠️ THE TYPEFACE IS SERVED BY THIS CONTAINER, not fetched from Google.
 * Upstream links fonts.googleapis.com, and apexmira's policy is default-src
 * 'self' with no CDN and no external font: that stylesheet is REFUSED at the
 * edge, and the page then renders in a fallback nobody chose. The integration
 * strips those links and these four faces are the site's own Inter, copied
 * into the image by the Dockerfile.
 *
 * The monospace stack is left to fall back. Upstream asks for JetBrains Mono,
 * apexmira does not carry it, and 'Fira Code', monospace is already declared
 * after it. Shipping a fifth font file to style the hex readouts is not worth
 * the weight. */
@font-face {
  font-family: "Inter";
  src: url("/labs/colorust/app/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/labs/colorust/app/fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/labs/colorust/app/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/labs/colorust/app/fonts/inter-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* The apexmira skin for colorust.
 *
 * It re-points tokens that web/src/styles/global.css already declares, and
 * adds none. The upstream project keeps its own blue and its own surfaces; the
 * deployment under apexmira.com wears these instead. tools/token-parity.py
 * fails the build when upstream declares a brand token this file does not
 * cover, which is how a pinned commit bump reports an incomplete skin.
 *
 * WHAT IS DELIBERATELY NOT HERE:
 *
 * The --preview-* family. It paints the simulated interface where the reader
 * sees their own palette applied, and it is neutral on purpose: painting that
 * floor in apexmira navy would corrupt the preview, which exists to show the
 * reader's colour against a background that does not have an opinion.
 *
 * The --gamut-* pair and --color-success/warning/danger. They are the tool's
 * verdict vocabulary, not brand: a reader learns that green means inside the
 * gamut, and that meaning should not move between deployments.
 *
 * The slate ramp of the light theme. colorust already uses #F8FAFC, #FFFFFF,
 * #0F172A, #475569 and #64748B, which are the same values apexmira's own
 * tokens.css carries. There is nothing to change.
 */

:root {
  /* The brand, on the dark theme. */
  --brand-primary: #f7931e;
  --brand-light: #fb923c;
  --brand-gradient: linear-gradient(135deg, #f7931e 0%, #c86a1d 55%, #0a192f 100%);

  /* The surfaces, from apexmira's own navy ramp: the page, a card one step
   * above it, and one step further for a hover or a field. */
  --bg-app: #060b13;
  --bg-surface: #0b1322;
  --bg-surface-elevated: #111c30;
  --bg-surface-glass: rgba(11, 19, 34, 0.75);

  /* Supporting text on dark, matching apexmira's --slate-400. */
  --text-secondary: #94a3b8;
}

/* ⚠️ EVERY TOKEN SET ABOVE IS RESTATED HERE, and leaving one out is a real
 * defect rather than a shortcut. `:root` and `[data-theme="light"]` have the
 * SAME specificity, so the later rule wins: this file loads after global.css,
 * so a token set only in the `:root` above would beat upstream's light value
 * and paint the light theme in the dark surface. Measured on 2026-09-21, when
 * exactly that happened and the light page came out navy. */
[data-theme="light"] {
  /* The earthy orange is the one apexmira uses for orange text and for hover
   * on a light background: the pure brand orange does not clear 4.5:1 there. */
  --brand-primary: #c86a1d;
  --brand-light: #ea580c;
  --brand-gradient: linear-gradient(135deg, #c86a1d 0%, #f7931e 55%, #0a192f 100%);

  /* The light surfaces are apexmira's own: the page, a card on it, and a
   * raised block. They are the same slate values upstream already uses, so
   * these lines exist to win the ordering, not to change a colour. */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --bg-surface-glass: rgba(255, 255, 255, 0.82);
  --text-secondary: #475569;
}