/* figure-1 design tokens — the ONE source of truth for palette + type.
 *
 * Loaded by every page that renders site chrome: index/room/preview link it
 * directly, the standalone public/*.html visitor pages link it above their
 * inline <style>, and admin.html + portfolio/portfolio.css consume it instead
 * of defining their own :root blocks.
 *
 * When you need a new size or grey: use an existing step. If none fits, the
 * step belongs in HERE, not in one page's <style>. That's the whole point. */

:root {
  /* ---- palette ----
   * ONE ink, ONE muted grey, ONE red. Secondary text is ALWAYS --dim; there
   * is no second, slightly-different grey for "a bit more muted". --line /
   * --line-strong / --wash are structure (borders, tracks, surface tints),
   * never text. */
  --bg: #f2f2f0;
  --ink: #231f20;
  --dim: rgba(35, 31, 32, 0.45); /* ALL secondary text: meta, labels, helper */
  --line: rgba(35, 31, 32, 0.14); /* hairline borders, boxed inputs */
  --line-strong: rgba(35, 31, 32, 0.35); /* underline inputs, slider tracks */
  --wash: rgba(35, 31, 32, 0.06); /* surface tints: thumbs, code, placeholders */
  --red: #c4391b; /* the one red: errors, alerts, the locked-door line */

  /* ---- type scale. six steps, each with a distinct job. ----
   * 0.9 and 0.92 were merged: 0.32px apart is not a distinction anyone can
   * see, and near-duplicate steps are what made the site read as machine-set. */
  --fs-xs: 0.72rem; /* position counts, timecodes */
  --fs-sm: 0.78rem; /* figure captions, field labels, small print, strips */
  --fs-body: 0.92rem; /* body copy, chat, page nav, prompts, status lines */
  --fs-ui: 1rem; /* inputs, buttons, submit arrows */
  --fs-head: 1.15rem; /* page headings, the locked-door line */
  --fs-title: 1.8275rem; /* page titles */
  --fs-title-sm: 1.7rem; /* page titles, ≤600px */

  /* ---- columns ----
   * --fig-col is the media envelope: the widest a figure may render. A
   * LANDSCAPE figure fills it; a portrait one is much narrower and, being
   * centred, starts well inside it.
   *
   * --nav-col is the column page chrome ("← back to site") aligns to. On the
   * figure pages (home / room) viewer.ts overwrites it with the RENDERED media
   * width, so the link's left edge meets the picture's left edge instead of
   * being stranded out at the envelope — a portrait figure is centred and
   * starts well inside --fig-col. Pages with no viewer (rooms, stage, the
   * gates, the forms) use their own content column directly and never read
   * this. The default below is the pre-JS / no-JS fallback. */
  --fig-col: min(58vmin, 520px);
  --nav-col: var(--fig-col);

  /* ---- type stacks ----
   * Paprika is the CLOSED/UNAVAILABLE-STATE voice: the short line that tells a
   * visitor a thing isn't open to them right now. Today that's exactly two
   * strings — "you've reached a locked door" (the gate pages) and "not live
   * currently" (the stage marquee) — always in --red.
   *
   * It is NOT a general display font. It does not go on buttons, inputs,
   * status/error lines or headings; it spread to the gate buttons and inputs
   * once and had to be pulled back. It falls back to the site sans, never to
   * `cursive` (Comic Sans on Windows) or `serif`.
   *
   * NOTE: Paprika is a FONT, not a colour. The red is --red. An earlier
   * --paprika colour variable was a naming collision and was removed. */
  --font-sans:
    "Neue Haas Grotesk Display Pro", "NHaasGroteskDSPro-55Rg", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-serif: "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
  --font-paprika:
    "Paprika", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
}

/* The media envelope widens to 84vw on mobile; --nav-col follows it. */
@media (max-width: 600px) {
  :root {
    --fig-col: min(84vw, 520px);
  }
}