:root{
  /* --- Base: void greys. The studio ships on black. --- */
  --void-1000:#050506; --void-950:#0A0A0C; --void-900:#0E0F12; --void-850:#131418;
  --void-800:#191B20; --void-750:#20232A; --void-700:#2A2E37; --void-600:#3A3F4A;
  --void-500:#555B68; --void-400:#7A818F; --void-300:#A3A9B5; --void-200:#C9CDD5;
  --void-100:#E6E8EC; --bone:#F2EEE8; --bone-dim:#D8D2C8;

  /* --- Ember: the molten primary, pulled from the Beast Fists render --- */
  --ember-300:#FF9A6B; --ember-400:#FF7A45; --ember-500:#FF5A1F;
  --ember-600:#E2410F; --ember-700:#B22F08; --ember-800:#6E1C04;

  /* --- Brass: ceremonial secondary (awards / credits / premium) --- */
  --brass-300:#E8D08A; --brass-400:#D4B457; --brass-500:#C9A227; --brass-600:#9A7A16;

  /* --- Steel: cool counterweight for UI chrome + links --- */
  --steel-300:#8FC7E8; --steel-400:#5FA8D3; --steel-500:#3C86B4;

  /* --- Semantic --- */
  --green-500:#3FB46F; --red-500:#E23B2E; --amber-500:#FFB020;

  /* --- Semantic aliases: use these in components --- */
  --bg-page:var(--void-950);
  --bg-sunken:var(--void-1000);
  --surface-card:var(--void-900);
  --surface-raised:var(--void-850);
  --surface-overlay:var(--void-800);
  --surface-inset:#0000004D;

  --text-body:var(--void-200);
  --text-strong:var(--bone);
  --text-muted:var(--void-400);
  --text-faint:var(--void-500);
  --text-on-ember:#140600;
  --text-on-bone:var(--void-950);

  --accent:var(--ember-500);
  --accent-hover:var(--ember-400);
  --accent-press:var(--ember-600);
  --accent-soft:#FF5A1F1F;
  --accent-ceremonial:var(--brass-500);

  --border-hairline:#FFFFFF14;
  --border-subtle:#FFFFFF24;
  --border-strong:#FFFFFF3D;
  --border-accent:#FF5A1F80;

  --link:var(--ember-400);
  --link-hover:var(--ember-300);

  --status-live:var(--green-500);
  --status-error:var(--red-500);
  --status-warn:var(--amber-500);
}
