:root {
  /* Colors */
  --color-brand-primary: #8E0E12;
  --color-brand-mid: #4B0608;
  --color-hero-bg: #300204;
  --color-accent: #0A0000;
  --color-surface: #1A0203;
  --color-surface-card: #0D0101;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #C4C4C4;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-crimson: rgba(142, 14, 18, 0.35);
  --color-bg-base: #0A0000;
  --color-bg-alt: #120101;
  --color-bg-deep: #060000;
  --color-section-divider: rgba(255, 255, 255, 0.05);

  /* Gradients */
  --gradient-hero: radial-gradient(circle at 40% 50%, #8E0E12 0%, #4B0608 50%, #300204 100%);
  --gradient-brand: linear-gradient(135deg, #8E0E12, #4B0608);

  /* Fonts */
  --font-display: 'Michroma', 'Orbitron', monospace;
  --font-body: 'Plus Jakarta Sans', 'Outfit', sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-12: 80px;

  /* Radius */
  --radius-btn: 6px;
  --radius-card: 12px;
  --radius-badge: 4px;
  --radius-input: 6px;

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-mid: 250ms ease-out;
  --transition-slow: 500ms ease-out;

  /* Nav height */
  --nav-height: 136px;
}

@media (max-width: 768px) {
  :root {
    --nav-height: 72px;
  }
}