:root{
/* ===== CINEMATIC MONOCHROME =====
   Brand palette is black, white, and greys only.
   No blue. No gold. No warm colors anywhere.
   Two restrained accents:
     - metallic silver (#c0c0c0) — subtle highlights, used very sparingly
     - deep red (#8b0000) — UI actions only (buttons/CTAs), nothing brighter */

/* base neutrals — near-black studio darks through to white */
--black-0:#020203;
--black-1:#0a0a0c;
--black-2:#111214;
--black-3:#1b1c1f;
--black-4:#26282c;
--grey-1:#3a3c41;
--grey-2:#5c5e63;
--grey-3:#8a8c91;
--grey-4:#b7b8bc;
--white-0:#f5f5f3;

/* metallic silver — cool, neutral highlight. use sparingly. */
--silver-1:#9a9c9f;
--silver-2:#c0c0c0;
--silver-3:#dcdcdc;

/* deep red — UI actions only. never brighter than red-deep. */
--red-deep:#8b0000;
--red-deep-hover:#6f0000;
--red-deep-active:#560000;

/* --- semantic aliases: use these in components/screens --- */
--bg-page:var(--black-0);
--bg-surface:var(--black-1);
--bg-elevated:var(--black-2);
--bg-inset:var(--black-3);
--bg-hover:var(--black-4);

--fg-primary:var(--white-0);
--fg-secondary:var(--grey-4);
--fg-tertiary:var(--grey-3);
--fg-disabled:var(--grey-2);

--border-subtle:rgba(245,245,243,0.08);
--border-default:rgba(245,245,243,0.14);
--border-strong:rgba(245,245,243,0.24);

/* accent = metallic silver: eyebrows, hairline highlights, active/hover states, links.
   It reads as part of the greyscale — quiet, never loud. */
--accent:var(--silver-2);
--accent-hover:var(--white-0);
--accent-active:var(--silver-1);
--accent-subtle:rgba(192,192,192,0.10);
--accent-on:var(--black-0);

/* action = deep red: primary buttons / CTAs only. */
--action:var(--red-deep);
--action-hover:var(--red-deep-hover);
--action-active:var(--red-deep-active);
--action-subtle:rgba(139,0,0,0.16);
--action-on:var(--white-0);

/* states — monochrome + red only (no green, no warm) */
--state-danger:var(--red-deep);
--state-success:var(--silver-2);
}