/**
 * Scheme 1 — scheme-stage tokens
 * Paper-quality pass 2026-09-16 · jacs-lewis (densify v2 for Lingxi)
 * RECONCILED with Tina paper refs · 2026-09-16
 * Brand lock: Bench Warm — /workspace/scheme1-brand/bench-warm/BRAND.md
 * Authority: /workspace/scheme-refs/jacs-lewis/README.md + CODE-SURVEY.md
 *           /workspace/scheme-refs/BRIEF.md (Tina’s 5 principles)
 * Primary paper look: jacs-lewis clean linear schemes
 *   (allenes toc-ga, mo-alkylidyne-scheme1, aleutianamine-scheme1)
 * Also: bjc14-179-scheme1.jpg, natchem-2022-hydride-fig3.jpg,
 *       jacs-2024-archangiumide-scheme2.jpg
 * Pair with TOKENS.md + SPEC.md + game.css (chrome). No lilac. No Night Cyan. Wordmark only.
 * Game chrome 2026-09-16: UI type = Fredoka (display) + Nunito (body); plate stays Helvetica/Arial.
 * Copper = CTA chrome only — NOT bond-highlight red.
 *
 * BAN: serif fonts on the scheme plate. All plate text
 * (labels, conditions, yields, atom labels) = Helvetica/Arial sans only.
 */

:root {
  /* —— Locked brand (UI chrome) —— */
  --paper: #f7f4ef;
  --paper-2: #e8e2d6;
  --ink: #1a1510;
  --copper: #c45c26;
  --copper-dim: #9a4318;
  --hood: #1f6b5a;
  --mute: #5c5348;

  /* —— Scheme-content accents (publication plate) —— */
  /* Black chemistry, one accent: bonds/arrows/labels = ink;
     --scheme-accent = new bond / tracked atom only; copper = UI CTA only. */
  --scheme-accent: #c41e3a; /* new bond / tracked atom — ACS letter red */
  --scheme-ghost: #b5ada2; /* unchanged scaffold */
  --scheme-focus: var(--ink); /* new fragment when ghosting */
  --scheme-focus-accent: var(--scheme-accent);
  --scheme-meta: var(--mute); /* yields / ee screen default */
  --scheme-meta-pub: #1a5fa8; /* optional export blue (archangiumide) */

  /* —— Fonts (plate = sans only; no serif) —— */
  --font-scheme: Helvetica, Arial, "Helvetica Neue", system-ui, sans-serif;
  --font-ui: Nunito, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: Fredoka, Nunito, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* —— Type scale (scheme plate ≈ ACS 7–9 pt, denser letter) —— */
  --type-scheme-label-size: 11px;
  --type-scheme-label-weight: 700;
  --type-atom-size: 9px;
  --type-atom-weight: 600;
  --type-condition-size: 9px; /* ACS ~7 pt */
  --type-condition-weight: 500;
  --type-reagent-size: 9.45px; /* 0.9 × the 10.5 pt atom label (style.js) */
  --type-reagent-weight: 400;
  --type-condition-below-size: 8.4px; /* 0.8 × the atom label */
  --type-condition-below-weight: 400;
  /* Stage = Indigo 10.5 pt atom labels drawn at 21 px (species.js LAYOUT.speciesScale = 2).
     Arrow text is set in the same pt space and scaled with it, so stage ≈ export.
     These are the at-rest values for STYLE_DEFAULT; controls.js rewrites them on
     :root whenever a style dial moves (applyStyleVars). */
  --stage-scale: 2;
  --type-reagent-stage-size: calc(var(--type-reagent-size) * var(--stage-scale)); /* 18.9px */
  --type-condition-below-stage-size: calc(var(--type-condition-below-size) * var(--stage-scale)); /* 16.8px */
  --type-text-species-size: 21px; /* MeOH / H2O typeset at atom-label size, regular weight */
  --type-label-fallback-size: 13px; /* unresolved species label (export.js draws 13 px) */
  --type-plus-size: 21px;
  --type-scheme-meta-size: 11px;
  --type-scheme-meta-weight: 700;
  --type-scope-id-size: 11px;
  --type-scope-id-weight: 700;
  --type-ui-size: 14px;
  --type-ui-weight: 400;
  --type-ui-meta-size: 12px;
  --type-ui-meta-weight: 500;
  --type-mono-size: 15px;
  --type-cond-line-height: 1.25; /* = species.js LAYOUT.lineHeight */

  /* —— Spacing (paper-quality: tight struct↔arrow, denser cascade) —— */
  --space-plate-pad: 28px;
  --space-plate-pad-sm: 16px;
  --space-bond-gap: 2px;
  --space-frag-gap: 16px; /* A + B / inter-fragment — paper density */
  --space-struct-arrow: 10px; /* last reactant/product ↔ arrow shaft — JACS letter tight */
  --space-arrow-len: 80px; /* denser letter; still fits 2–3 condition lines */
  --space-arrow-head: 6.6px; /* 3 × the 2.2px stroke (LAYOUT.arrowHead) */
  --space-cond-gap: 2px;
  --space-cond-above: 6px;
  --space-cond-below: 6px;
  --space-arrow-text-stage: 8px; /* arrow shaft ↔ text on stage = LAYOUT.arrowTextGap × stage-scale */
  --space-label-below: 10px;
  --space-scope-col: 32px;
  --space-scope-stack: 4px;
  --space-cycle-radius: 120px;
  --space-chapter-rule: 12px;

  /* —— Arrow + bonds —— */
  --stroke-scheme: 2.2px; /* 1.1 pt bond line (style.js) × stage-scale; the arrow shares it */
  --stroke-scheme-accent: 2px;
  --stroke-scheme-selected: 2px;
  --color-bond: var(--ink);
  --color-bond-new: var(--scheme-accent);
  --color-bond-ghost: var(--scheme-ghost);
  --color-bond-focus: var(--scheme-focus);
  --color-arrow: var(--ink);
  --color-condition: var(--ink);
  --color-reagent: var(--ink);
  --color-condition-below: var(--ink); /* JACS: below-arrow conditions are black like the reagents */
  --color-condition-mute: var(--mute);
  --color-scheme-meta: var(--scheme-meta);

  /* —— Layout mode hints —— */
  --chapter-rule: 1px dashed var(--mute);
  --scope-align: center;

  /* —— Scheme stage surface —— */
  --stage-bg: var(--paper);
  --stage-inset: #fffcfa;
  --stage-border: rgba(26, 21, 16, 0.07);
  --stage-border-hi: rgba(255, 255, 255, 0.5);
  --stage-radius: 14px;
  --stage-shadow: 0 18px 28px rgba(26, 21, 16, 0.08);
  --chrome-bg: rgba(255, 252, 250, 0.92);
  --export-bg: #ffffff;

  /* —— Interactive editor (light) —— */
  --edit-hover: rgba(196, 92, 38, 0.45);
  --edit-hover-fill: rgba(196, 92, 38, 0.08);
  --edit-selected: rgba(31, 107, 90, 0.55);
  --edit-selected-fill: rgba(31, 107, 90, 0.1);
  --edit-focus: 0 0 0 2px rgba(196, 92, 38, 0.35);
  --edit-marquee: rgba(26, 21, 16, 0.12);
  --edit-hit: 12px;
}

/* Stage surface hooks kept for the product chrome (assets/game.css restyles .scheme-stage as
   the board frame; the inner plate #scheme-stage stays flat --export-bg). */

.scheme-stage {
  background: var(--stage-bg);
  border: 1px solid var(--stage-border);
  border-radius: var(--stage-radius);
  box-shadow: var(--stage-shadow);
  padding: var(--space-plate-pad);
  color: var(--ink);
  /* Plate text is sans-only — inherit Helvetica/Arial stack */
  font-family: var(--font-scheme);
}

.scheme-stage--export {
  background: var(--export-bg);
  box-shadow: none;
  border: none;
  border-radius: 0;
}