/* ============================================================================
 *  tokens.css — PALETTE, TYPE, AND THE FONTS
 *  ---------------------------------------------------------------------------
 *  THE GROUND IS WARM. It was #010106 — a blue-black — with pure white type and
 *  a cyan signal, which is the default "tech product in space" palette and read
 *  as clinical: every surface the same neutral, every accent the same cold blue.
 *
 *  It is a bronze-black now, and the type sitting on it is BONE rather than
 *  #ffffff. That single change is most of the difference: warm white on warm
 *  black reads as printed, cold white on cold black reads as a screen.
 *
 *  THE SIGNAL IS GOLD. The archive is called TREASURES, the art in this build is
 *  a galleon and a chest, and the accent was cyan. Gold ties the colour to what
 *  the site is actually about, and it is the one hue allowed to mean "this is
 *  the live thing" — the rotating noun, an active nav item, a hover.
 *
 *  STEEL is the counterpoint, reserved for the systems/software side so the two
 *  halves of the practice are distinguishable without a second bright colour
 *  competing with the gold.
 *
 *  Contrast against the ground, all comfortably past AA:
 *    bone   17.4:1     gold  9.2:1     steel 6.2:1     dim  6.5:1
 * ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../public/fonts/archivo-wdth.woff2") format("woff2-variations"),
       url("../public/fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../public/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../public/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- the ground ------------------------------------------------------- */
  /* bronze-black, not blue-black. Three steps, so a panel can sit apart from
     the page without becoming grey. */
  --field: #0a0908;
  --field-deep: #050403;
  --field-raised: #14110e;

  /* ---- the inks --------------------------------------------------------- */
  --ink: #f4efe6;        /* bone — display type and anything set small */
  --ink-soft: #e6ded1;   /* the same warmth, one step back */
  /* LIFTED FROM #9a9287 SO THE SKY COULD BREATHE. The old value cleared AA
     only against a near-black ground, which forced the WebGL world to stay
     essentially flat black to keep small labels legible — the single biggest
     reason the background read as unfinished. */
  --ink-dim: #b9aea0;    /* labels, meta, anything secondary */
  --ink-line: rgba(244, 239, 230, 0.26);
  --ink-line-faint: rgba(244, 239, 230, 0.10);

  /* ---- the signal ------------------------------------------------------- */
  --signal: #e8a33d;       /* gold — "this is the live thing" */
  --signal-deep: #b87a22;  /* its shadow side, for rules and edges */
  --signal-glow: rgba(232, 163, 61, 0.22);

  /* ---- the counterpoint ------------------------------------------------- */
  --steel: #6e8fd6;
  --steel-dim: rgba(110, 143, 214, 0.30);

  /* the archive. Still a room you step into, so it stays a shade apart. */
  --dark: #060504;
  --dark-2: #17130f;
  --pale: #f4efe6;
  --pale-dim: #a89d8e;

  /* ---- type ------------------------------------------------------------- */
  --display: "Archivo", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --prose: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* the display face's variable axes — one place to retune the whole voice */
  --display-wdth: 62;
  --display-wght: 900;

  /* ---- rhythm ----------------------------------------------------------- */
  --gap: clamp(0.75rem, 1.4vw, 1.4rem);
  --edge: clamp(0.5rem, 0.9vw, 0.9rem);
  --chrome-h: clamp(52px, 5.4vh, 76px);
  --hair: 1px;

  /* ---- motion ----------------------------------------------------------- */
  --t-fast: 180ms;
  --t-mid: 420ms;
  --t-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* High-contrast opt-in from the interface toggle. It does not restyle the
 * site — it strengthens the things that are low-contrast by design: the
 * decorative rules, and the dim label ink. */
:root.is-contrast {
  --ink-line: rgba(244, 239, 230, 0.66);
  --ink-line-faint: rgba(244, 239, 230, 0.38);
  --ink-soft: #ffffff;
  --ink-dim: #ded5c8;
  --pale-dim: #f4efe6;
}

/* ============================================================================
 *  TYPE ROLES — one spec per job, so the same role cannot drift
 *  ---------------------------------------------------------------------------
 *  Measured before this existed: the four SCENE LABELS — the small mono line
 *  that introduces a section — were running at 9px and 10px with letter-spacing
 *  of 2.20, 2.78, 2.98 and 4.17px. Four values for one role. Metadata was three
 *  sizes with tracking from 0.42 to 1.78. Nobody reads a page and thinks "that
 *  label is 0.6px wider than the last one", but they do register the whole as
 *  unconsidered, and that is most of the difference between a site that looks
 *  designed and one that looks assembled.
 *
 *  These are the roles the page actually has. A new element picks one; it does
 *  not invent a fifth size.
 * ========================================================================== */
:root {
  /* the small mono line that introduces a section */
  --label-size: clamp(9px, 0.78vw, 12px);
  --label-track: 0.28em;
  --label-weight: 500;

  /* years, handles, captions, colophon — anything secondary and factual */
  --meta-size: clamp(10px, 0.82vw, 13px);
  --meta-track: 0.14em;

  /* a link that is a destination in its own right */
  --action-size: clamp(11px, 0.95vw, 15px);
  --action-track: 0.16em;

  /* running prose, the only serif on the page */
  --prose-size: clamp(15px, 1.35vw, 22px);
  --prose-lead: 1.55;
}