/* ============================================
   MVR Studios — CSS Custom Properties
   ============================================ */

:root {
  /* Colors — Cinematic dark palette */
  --color-bg: #0a0a0a;
  --color-bg-elevated: #111111;
  --color-panel-bg: rgba(10, 10, 10, 0.97);
  --color-text: #f0ece4;
  --color-text-muted: #7a756d;
  --color-accent: #e8c547;
  --color-accent-hover: #f2d96b;
  --color-highlight: #ffffff;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-backdrop: rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-xs: clamp(0.625rem, 0.5rem + 0.3vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.65rem + 0.4vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);
  --text-lg: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 1.8vw, 3.5rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 2.5vw, 5rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Nav panel */
  --nav-panel-width: 55vw;
  --nav-panel-width-mobile: 100vw;
  --nav-z-index: 1000;
  --nav-backdrop-z: 999;
  --nav-toggle-z: 1001;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transitions */
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.7s;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Backdrop blur */
  --backdrop-blur: 20px;
}