/* ── REVELSTOKE FILMS · DESIGN SYSTEM TOKENS ── */
/* Source: docs/design/design-system.html · v18 April 2026 */
/* DO NOT ADD VALUES NOT PRESENT IN THE SOURCE FILE */

/* Behind The Nineties — self-hosted brand display font */
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Smbd.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Smbd-It.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Md-It.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-It.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Bd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('/assets/fonts/Behind-The-Nineties-Bd-It.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* COLOUR TOKENS — from design-system.html :root */
  --black:          #060a07;
  --green-deep:     #013224;
  --orange:         #DE762B;
  --orange-light:   #F08030;
  --orange-dark:    #C4621A;
  --cream:          #E9E0D7;
  --white:          #FFFFFF;

  /* RGB triples for rgba() usage */
  --orange-rgb:     222, 118, 43;
  --green-deep-rgb: 1, 50, 36;
  --cream-rgb:      233, 224, 215;

  /* GLASS TOKENS — exact values from design-system.html */
  --glass-fill:         rgba(255,255,255,0.07);
  --glass-fill-hover:   rgba(255,255,255,0.10);
  --glass-border:       rgba(255,255,255,0.12);
  --glass-border-top:   rgba(255,255,255,0.22);
  --glass-blur:         blur(30px) brightness(1.08) saturate(1.5);
  --glass-shadow:
    0 20px 48px rgba(0,0,0,0.45),
    0 4px 14px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.12);

  /* ACCENT COLOURS */
  --accent-orange: rgba(222,118,43,1.0);
  --accent-green:  rgba(100,220,140,1.0);
  --accent-cyan:   rgba(100,200,255,1.0);
  --accent-amber:  rgba(255,190,60,1.0);
  --accent-purple: rgba(180,120,255,1.0);

  /* TYPOGRAPHY — Revelstoke brand fonts */
  --font-display: 'Behind The Nineties', 'Work Sans', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  /* Legacy aliases — keep for backward compatibility */
  --font-ui:      'Work Sans', sans-serif;
  --font:         'Work Sans', sans-serif;
  --font-heading: 'Behind The Nineties', 'Work Sans', sans-serif;
  --font-label:   'Work Sans', sans-serif;

  /* TEXT OPACITY SCALE */
  --text-primary:   rgba(255,255,255,0.88);
  --text-secondary: rgba(255,255,255,0.62);
  --text-muted:     rgba(255,255,255,0.40);
  --text-dim:       rgba(255,255,255,0.28);

  /* SPACING */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  /* Legacy spacing aliases */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* RADIUS */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 30px;
  /* Legacy aliases */
  --radius:      12px;
  --radius-full: 9999px;
  --radius-xl:   20px;

  /* ANIMATION TIMINGS — from design-system.html section 13 */
  --ease:            ease;
  --ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   80ms;
  --duration-normal: 220ms;
  --duration-slow:   420ms;

  /* Z-INDEX SCALE */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  500;
  --z-modal:    600;
  --z-toast:    800;
  --z-tooltip:  1000;

  /* LEGACY COLOUR ALIASES — keep so existing JS/CSS doesn't break */
  --bg:          #013224;
  --bg-deep:     #011e15;
  --bg-dark:     #012a1e;
  --bg-card:     #01382a;
  --bg-elevated: #014a38;
  --bg-glass:    rgba(1,50,36,0.85);
  --bg-gradient: linear-gradient(160deg, #011e15 0%, #013224 60%, #012a1e 100%);
  --accent:      #DE762B;
  --accent-hover:#F08030;
  --color-accent:#DE762B;
  --text:        #E9E0D7;
  --color-muted: rgba(240, 237, 232, 0.65);
  --border:      rgba(255,255,255,0.12);
  --border-hi:   rgba(255,255,255,0.20);
  --border-hover:rgba(255,255,255,0.20);
  --border-card: rgba(255,255,255,0.12);
  --forest:      #013224;
  --lime:        #C6DE90;
  --sky:         #C0E6F1;
  --orange-dim:  rgba(222,118,43,0.18);
  --orange-glow: rgba(222,118,43,0.35);

  /* RGB triples for legacy rgba(var(...)) patterns */
  --bg-deep-rgb:     1, 30, 21;
  --bg-rgb:          1, 50, 36;
  --bg-dark-rgb:     1, 42, 30;
  --bg-card-rgb:     1, 56, 42;
  --bg-elevated-rgb: 1, 74, 56;
  --text-rgb:        233, 224, 215;
  --accent-rgb:      222, 118, 43;

  /* SHADOW ALIASES */
  --shadow-sm:     0 2px 6px rgba(0,0,0,0.30);
  --shadow-md:     0 6px 18px rgba(0,0,0,0.40);
  --shadow-lg:     0 12px 32px rgba(0,0,0,0.50);
  --shadow-card:   0 2px 8px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-hover:  0 12px 32px rgba(0,0,0,0.30);
  --shadow-glass:  var(--glass-shadow);

  /* ADMIN LAYOUT */
  --header-h:    72px;
  --sidebar-w:   220px;
  --nav-size:    15px;
  --nav-weight:  600;
}