/**
 * FilmMerge Design System — Tokens
 *
 * THE SINGLE SOURCE OF TRUTH for every design decision.
 *
 * Previously duplicated in every one of the 16 HTML pages.
 * Now defined once here and loaded globally by the theme.
 *
 * To update a token, change it here. The change propagates
 * instantly to every page, component, and template.
 */

:root {

  /* ── Backgrounds ──────────────────────────────────────── */
  --ink:    #0a0c10;   /* Primary page background — deepest black         */
  --deep:   #0f1318;   /* Secondary background — hero sections, footer    */
  --panel:  #161b23;   /* Card / panel background — form cards, nav       */
  --border: #1e2530;   /* Borders, dividers, subtle separators            */

  /* ── Accent — the gold cinematic identity ────────────── */
  --gold:    #c8973a;  /* Primary gold — CTAs, highlights, active states  */
  --gold-lt: #e6b55a;  /* Light gold — hover states, gradients            */
  --gold-dk: #a07628;  /* Dark gold — pressed states, deep accents        */

  /* ── Typography ───────────────────────────────────────── */
  --cream:  #f2ead8;   /* Primary text on dark backgrounds                */
  --muted:  #8a92a0;   /* Secondary / supporting text                     */
  --white:  #ffffff;   /* Pure white — major headings only                */

  /* ── Semantic state colors ────────────────────────────── */
  --green:  #4ade80;   /* Success, approved, active states                */
  --red:    #f87171;   /* Error, rejected, danger states                  */
  --yellow: #fbbf24;   /* Warning, pending states                         */
  --blue:   #60a5fa;   /* Info, under-review states                       */

  /* ── Typography faces ─────────────────────────────────── */
  --serif: 'Cormorant Garamond', Georgia, serif;  /* Display / headings   */
  --sans:  'Manrope', sans-serif;                 /* Body / UI text       */

  /* ── Spacing & layout ─────────────────────────────────── */
  --radius:    6px;     /* Default corner radius for inputs, cards        */
  --radius-lg: 14px;    /* Large radius — feature cards, modals           */
  --radius-xl: 20px;    /* Extra large — major sections, CTA blocks       */

  /* ── Motion ───────────────────────────────────────────── */
  --transition: 0.35s cubic-bezier(.4, 0, .2, 1);  /* Standard easing    */

  /* ── Container ────────────────────────────────────────── */
  --max-width: 1200px;  /* Maximum content width                          */
}