/* ============================================================
   CINEMA 3D — design tokens
   THE source of truth for color, type, spacing, radius, z-index.
   One accent color. One typeface. Near-black everything.
   ============================================================ */

:root {
  /* Color */
  --bg-0: #060606;            /* page base */
  --bg-1: #0c0c0c;            /* raised surface */
  --bg-2: #141412;            /* cards / panels */
  --bg-3: #1c1b18;            /* inputs / wells */
  --accent: #e8102e;          /* the one red */
  --accent-deep: #a30c21;     /* pressed / gradient-safe dark red */
  --accent-ink: #ffffff;      /* text on accent */
  --text: #f5f2ec;            /* warm white */
  --text-dim: #c9c4b6;        /* secondary text */
  --muted: #8a8578;           /* warm gray */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --blackout: #000000;

  /* Type — one family, Oswald, condensed, uppercase-forward */
  --font: 'Oswald', 'Arial Narrow', sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-md: 1rem;
  --fs-lg: 1.35rem;
  --fs-xl: 2.1rem;
  --fs-hero: clamp(2.6rem, 7vw, 5.2rem);
  --ls-tight: 0.02em;
  --ls-body: 0.06em;
  --ls-head: 0.14em;
  --ls-eyebrow: 0.34em;
  --lh-body: 1.65;

  /* Shape */
  --radius: 2px;              /* sharp, everywhere */

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Layout */
  --maxw: 1180px;
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  /* Z-index */
  --z-header: 50;
  --z-modal: 100;
  --z-cinema: 200;
  --z-hud: 210;
  --z-toast: 300;
}