/* ============================================================
   Frame & Field — Color tokens
   A four-step grey scale on warm paper, one reserved acid accent.
   ============================================================ */
:root {
  /* --- Base palette --- */
  --color-paper: #f3f1ec;      /* Primary canvas — warm off-white */
  --color-surface: #ffffff;    /* Inset tiles, image frames */
  --color-ink: #111111;        /* Primary type, dark plate, primary button */
  --color-charcoal: #2a2a2a;   /* Secondary type, button hover, dense panels */
  --color-muted: #6b6b6b;      /* Supporting paragraphs, captions, meta */
  --color-hairline: #e2dfd9;   /* 1px frames, section seams, input borders */
  --color-signal: #d7ff3a;     /* Single-use accent — play badge / one pill */
  --color-error: #b3261e;      /* Validation / destructive */

  /* --- Semantic aliases --- */
  --color-bg: var(--color-paper);
  --color-fg: var(--color-ink);
  --color-fg-on-ink: var(--color-paper);   /* Warm white on dark plate */
  --color-fg-muted: var(--color-muted);
  --color-border: var(--color-hairline);
  --color-accent: var(--color-signal);
  --color-focus: var(--color-ink);

  --surface-card: var(--color-surface);
  --surface-plate: var(--color-ink);
  --text-body: var(--color-ink);
  --text-support: var(--color-muted);
}