/* ============================================
   ZEITREISE – Design Tokens
   ============================================ */

:root {
  /* Brand */
  --brand-primary: #e63946;
  --brand-secondary: #f4a261;
  --brand-accent: #2a9d8f;
  --brand-dark: #0a0a12;
  --brand-light: #f8f9fa;

  /* Typography */
  --font-display: 'Bebas Neue', 'Archivo Black', sans-serif;
  --font-headline: 'Archivo Black', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 72px;
  --section-padding: clamp(4rem, 10vw, 8rem);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* Z-Index Scale */
  --z-loader: 9999;
  --z-cursor: 9998;
  --z-nav: 1000;
  --z-progress: 999;
  --z-overlay: 100;

  /* Decade Colors (defaults, overridden per section) */
  --decade-bg: var(--brand-dark);
  --decade-text: #ffffff;
  --decade-accent: var(--brand-primary);
  --decade-font-accent: var(--font-body);
}