/* ===========================================================================
   Design tokens — PLAN.md Phase 4, item 2.
   ===========================================================================

   Every value here was read out of custom.css, not invented. The point of this
   file is that the next person changes a colour in ONE place.

   How bad the drift had become: custom.css holds six near-identical reds —
   #E50914, #A1080D, #DC2626, #C0392B, #C62222 and #FF5733 — which is what
   happens when a palette lives inline across 1,654 lines. Reading them in
   context showed they are not six colours but three PAIRS, each the two stops
   of a gradient or a base plus its hover:

       #E50914 -> #A1080D    the brand gradient (badges, primary buttons)
       #FF5733 -> #C0392B    the secondary gradient
       #DC2626 -> #C62222    danger, base and hover

   Naming them as pairs is most of the value; the rest is having somewhere to
   put the studio's dark palette.

   ## This file is additive and changes nothing on its own

   custom.css is NOT refactored yet. These tokens are declared and available;
   existing rules keep their literals until a screen is rebuilt on them. That
   keeps the risk at zero — a token nobody references cannot break a page — and
   it means the refactor can happen screen by screen rather than as one
   1,654-line change against a live site.

   ## Dark studio, light cinema

   PLAN.md Phase 4 item 3: the studio goes dark because generated imagery reads
   more accurately against it, while the public cinema pages stay exactly as
   they are so nothing changes for visitors or for SEO. That is why the dark
   palette is scoped to `.studio-dark` rather than applied at :root or driven by
   prefers-color-scheme — a visitor's OS setting must not repaint the cinema.
   =========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --brand-500: #E50914;
  --brand-700: #A1080D;
  --brand-gradient: linear-gradient(90deg, var(--brand-500), var(--brand-700));

  /* ---- secondary accent ------------------------------------------------ */
  --accent-500: #FF5733;
  --accent-700: #C0392B;
  --accent-gradient: linear-gradient(90deg, var(--accent-500), var(--accent-700));

  /* ---- semantic -------------------------------------------------------- */
  --danger-500: #DC2626;
  --danger-700: #C62222;
  --success-500: #28A745;
  --warning-500: #FF5733;   /* shares the accent hue; deliberate, not an oversight */

  /* ---- neutrals -------------------------------------------------------- */
  --ink:          #191919;
  --ink-muted:    #464646;   /* 29 uses in custom.css: the workhorse text colour */
  --line:         #CED4DA;
  --surface:      #FFFFFF;
  --surface-sunk: #F8F9FA;
  --surface-alt:  #F1F3F4;

  /* ---- spacing: a 4px scale, so vertical rhythm stops being guesswork --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ---- radius ---------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .12);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .18);

  /* ---- typography ------------------------------------------------------ */
  --font-ui: inherit;        /* Bootstrap 3's stack stays; tokens do not restyle text */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --leading-tight: 1.2;
  --leading-body:  1.55;

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- z-index: named, so the next modal does not need z-index: 99999 --- */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-toast:    1080;
}

/* ===========================================================================
   Dark studio. Scoped to .studio-dark on a wrapper, never to :root.
   Only the neutrals move: the brand and semantic hues are chosen to work on
   both grounds, so a component built on these tokens needs no dark variant.
   =========================================================================== */
.studio-dark {
  --ink:          #E8E6E1;
  --ink-muted:    #A6ADB5;
  --line:         #2F3842;
  --surface:      #1A2027;
  --surface-sunk: #12161C;
  --surface-alt:  #222A33;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .50);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .60);

  /* The brand red is legible on both, but it needs to sit slightly brighter on
     a dark ground to carry the same visual weight. */
  --brand-500: #F4232E;
  --danger-500: #F05252;
  --success-500: #3FBF5F;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}