/* ================================================================
   DESIGN TOKENS — Cinematic Noir
   Source: DESIGN.md + ralies.studio brand data
   ================================================================ */

:root {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg:                  #180b09;
  --surface:             #1e100e;
  --surface-low:         #271816;
  --surface-container:   #2b1c19;
  --surface-high:        #362623;
  --surface-highest:     #42312e;
  --surface-elevated:    #240E0B;
  --surface-bright:      #473532;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:                #f8dcd8;
  --text-secondary:      #dfbfbb;
  --text-muted:          #CDCAD5;

  /* ── Brand ────────────────────────────────────────────────── */
  --primary:             #8d241a;      /* blood red — CTA, actives */
  --primary-light:       #ffb4a9;      /* coral — highlights on dark */
  --primary-glow:        rgba(141, 36, 26, 0.18);
  --primary-glow-hover:  rgba(141, 36, 26, 0.40);
  --secondary:           #4B1711;      /* deep burgundy */
  --tertiary:            #94cdf8;      /* ice blue accent */

  /* ── Borders ──────────────────────────────────────────────── */
  --outline:             #a68a86;
  --outline-dim:         #58413e;
  --border-low:          rgba(141, 36, 26, 0.20);
  --border-surface:      rgba(248, 220, 216, 0.07);

  /* ── Fonts ────────────────────────────────────────────────── */
  --font-display:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ── Spacing (8px base) ───────────────────────────────────── */
  --sp-1:   8px;
  --sp-2:   16px;
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-6:   48px;
  --sp-8:   64px;
  --sp-12:  96px;
  --sp-16:  128px;
  --sp-20:  160px;

  --gutter:      24px;
  --outer:       64px;
  --container:   1440px;
  --section-lg:  100px;
  --section-sm:  56px;

  /* ── Radius ───────────────────────────────────────────────── */
  --r-sm:    4px;
  --r-md:    8px;
  --r-base:  12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-full:  9999px;

  /* ── Elevation / Glows ────────────────────────────────────── */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:       0 8px 40px rgba(0,0,0,0.7);
  --glow-red:        0 0 24px var(--primary-glow),  0 0 48px rgba(141,36,26,0.07);
  --glow-red-hover:  0 0 40px var(--primary-glow-hover), 0 8px 40px rgba(141,36,26,0.18);
  --btn-shadow:      rgba(0,0,0,0) 0 0 0 0, rgba(0,0,0,0) 0 0 0 0,
                     rgba(141,36,26,0.18) 0 18px 40px 0;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-inout:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    150ms;
  --dur-mid:     250ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  /* ── Z layers ─────────────────────────────────────────────── */
  --z-base:    0;
  --z-raise:   10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-grain:   9000;
}