:root{
  /* Base palette */
  --color-obsidian:#222326;
  --color-carbon:#0d0d0e;
  --color-charcoal-plate:#272c33;
  --color-slate-body:#191c21;
  --color-bone-white:#f4f4f5;
  --color-ash-mute:#9ea0a9;
  --color-smoke:#43454c;
  --color-paper:#ffffff;
  --color-magenta-spotlight:#e32652;
  --color-editorial-gold:#eed37f;
  --color-camp-yellow:#ffd600;
  /* Logo artwork only — the clapperboard red. Never a UI accent. */
  --color-reel-red:#8b0000;

  /* Semantic — text */
  --text-primary:var(--color-paper);
  --text-secondary:var(--color-bone-white);
  --text-muted:var(--color-ash-mute);
  --text-on-accent:var(--color-paper);
  --text-on-yellow:var(--color-carbon);

  /* Semantic — surfaces */
  --surface-canvas:var(--color-obsidian);
  --surface-panel:var(--color-carbon);
  --surface-card:var(--color-charcoal-plate);
  --surface-nested:var(--color-slate-body);
  --surface-inactive:var(--color-smoke);
  --surface-video:#000000;

  /* Semantic — action */
  --action-primary:var(--color-magenta-spotlight);
  --action-primary-hover:#c81f46;
  --action-primary-press:#ab1a3b;
  --action-accent:var(--color-editorial-gold);
  --action-stamp:var(--color-camp-yellow);

  /* Semantic — borders */
  --border-hairline:rgba(244,244,245,0.2);
  --border-plate:var(--color-charcoal-plate);
  --border-strong:var(--color-paper);
  --border-mute:var(--color-ash-mute);
  --border-gold:var(--color-editorial-gold);
}