/* MentiSec — design tokens
 * Light: :root.  Dark: [data-theme="dark"].
 * Source: design/styles.css L3–73, plus form/state additions per
 * MIGRATION_PLAN §10.2.
 *
 * Aliases used in selectors (do NOT introduce new tokens):
 *   --accent       → var(--gold)
 *   --ink-3        → var(--muted)
 *   --rule-strong  → var(--rule)
 */

:root {
  /* The light palette, named once. --paper-* is never overridden by the dark
     theme, so anything that has to stay on cream in both themes can re-declare
     the ordinary tokens from these — see .fig-frame in base.css, where the
     article diagrams live on a fixed paper panel. Everything else should keep
     using --bg / --ink / … and let the theme swap them. */
  --paper-bg: #f5f1e8;
  --paper-bg-alt: #ebe6d8;
  --paper-ink: #1a1106;
  --paper-ink-2: #2f2418;
  --paper-muted: #6b6256;
  --paper-rule: #d8d1bd;
  --paper-rule-soft: #e3ddcc;
  /* The one gold that survives cream: 3.57:1, which clears the 3:1 minimum for
     a line or a border and misses the 4.5:1 for text. Marks only — brackets and
     the border of an aside. The brand --gold is 1.6:1 here and could not even
     outline a box, which is why the drawings have their own. */
  --paper-gold: #a87511;

  /* Light — brand: cream paper, navy hero, gold accent, dark-brown ink */
  --bg: var(--paper-bg);
  --bg-alt: var(--paper-bg-alt);
  --bg-navy: #1f2d45;
  --bg-navy-2: #16223a;
  --ink: var(--paper-ink);
  --ink-2: var(--paper-ink-2);
  --muted: var(--paper-muted);
  --muted-2: #8a8275;
  --rule: var(--paper-rule);
  --rule-soft: var(--paper-rule-soft);
  --silver: #b8bcc2;
  --gold: #f1b53a;
  --gold-2: #d99e1f;
  --on-navy: #f5f1e8;
  --on-navy-muted: #b8c2d4;
  --on-navy-rule: #2e3e5a;

  /* IBM Plex system-wide. Playfair Display reserved for the SVG wordmark and
     the single highlighted word in the hero — nowhere else. */
  --font-display:  "Playfair Display", "Bodoni Moda", Georgia, serif;
  --font-ui:       "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-longform: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Legacy aliases — Plex Sans for both. Long-form passages opt into --font-longform explicitly. */
  --serif: var(--font-ui);
  --sans:  var(--font-ui);

  --maxw: 1200px;
  --gut: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);

  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-36: 36px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --dur: 220ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* Form / state colours (referenced by spec §11 / §14, missing in styles.css) */
  --error: #a8321b;
  --error-bg: #fbeee9;
  --success: #1f8a5b;

  /* Kontakt redesign (docs/design_handoff_kontakt). Per-theme by necessity,
     not preference: gold on the cream background measures 2.1:1 as text and
     1.6:1 as a non-text indicator, so light theme cannot use it for kickers,
     required asterisks or focus rings. Dark theme can, and does.
     --err is 6.3:1 on both page backgrounds. */
  --err: #a03028;
  --focus: var(--ink);
  --kicker: var(--muted);

  /* Border colour for controls that have to read as controls. --rule is 1.35:1
     against the page and fails the 3:1 non-text minimum, which is exactly how
     the old copy button ended up looking like text. --muted-2 measures 3.37:1
     on cream and 3.20:1 on navy. Use --rule for hairlines that divide, --edge
     for outlines that mean "you can press this". */
  --edge: var(--muted-2);
}

[data-theme="dark"] {
  /* Dark — brand navy paper, gold accent */
  --bg: #1f2d45;
  --bg-alt: #16223a;
  --bg-navy: #16223a;
  --bg-navy-2: #0e1830;
  --ink: #f5f1e8;
  --ink-2: #d8d1bd;
  --muted: #8a96ad;
  --muted-2: #6e7a92;
  --rule: #2e3e5a;
  --rule-soft: #243352;
  --silver: #2a3a5a;
  --gold: #f1b53a;
  --gold-2: #ffc54a;
  --on-navy: #f5f1e8;
  --on-navy-muted: #b8c2d4;
  --on-navy-rule: #2e3e5a;

  --error: #e26a55;
  --error-bg: #2a1714;
  --success: #2dbb7b;

  --err: #ff9184;
  --focus: var(--gold);
  --kicker: var(--gold);
  --edge: var(--muted-2);
}