/* =============================================
   DESIGN TOKENS — FunTime 10th Anniversary
   Premium Warm Red Theme
   ============================================= */

:root {
  /* Primary reds — warm, rich, premium */
  --c-red: #e52535;
  --c-red-vivid: #ff2d46;
  --c-red-neon: #ff3a54;
  --c-red-light: #ff6b7f;
  --c-red-hot: #ff1744;
  --c-red-dark: #b71c1c;
  --c-red-deep: #7f1d1d;
  --c-crimson: #dc143c;
  --c-bordeaux: #3b0a0a;
  --c-wine: #2a0505;

  /* Warm accents */
  --c-rose: #ff4d6a;
  --c-coral: #ff6b6b;
  --c-amber: #ffab40;
  --c-gold: #ffd700;
  --c-silver: #c0c0c0;
  --c-bronze: #cd7f32;

  /* Backgrounds — warm dark, not pure black */
  --c-black: #08050a;
  --c-bg: #0d0709;
  --c-bg-light: #160d10;
  --c-bg-section: #110a0c;
  --c-bg-card: rgba(255, 20, 40, 0.04);
  --c-bg-card-hover: rgba(255, 20, 40, 0.08);

  /* Glass — visible red tint */
  --c-glass: rgba(229, 37, 53, 0.06);
  --c-glass-strong: rgba(229, 37, 53, 0.1);
  --c-glass-border: rgba(229, 37, 53, 0.18);
  --c-glass-border-hover: rgba(255, 45, 70, 0.4);

  /* Text — warm tones */
  --c-text: #f5eded;
  --c-text-secondary: #b8a0a5;
  --c-text-muted: #6e5559;

  /* Glow shadows — rich, layered */
  --glow-red:
    0 0 15px rgba(229, 37, 53, 0.5),
    0 0 45px rgba(229, 37, 53, 0.2),
    0 0 80px rgba(229, 37, 53, 0.08);
  --glow-red-intense:
    0 0 20px rgba(255, 45, 70, 0.7),
    0 0 60px rgba(229, 37, 53, 0.35),
    0 0 120px rgba(229, 37, 53, 0.15),
    inset 0 0 30px rgba(229, 37, 53, 0.05);
  --glow-red-subtle:
    0 0 8px rgba(229, 37, 53, 0.25),
    0 0 25px rgba(229, 37, 53, 0.1);
  --glow-text:
    0 0 8px rgba(255, 45, 70, 0.5),
    0 0 30px rgba(229, 37, 53, 0.25),
    0 0 60px rgba(229, 37, 53, 0.1);

  /* Typography */
  --ff-heading: 'Space Grotesk', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-hero: clamp(2.2rem, 6.5vw, 5.5rem);
  --fs-h2: clamp(1.6rem, 4vw, 3.2rem);
  --fs-h3: clamp(1.2rem, 2.5vw, 1.8rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-small: clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-label: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-ultra: 0.15em;

  /* Spacing */
  --section-pad-y: clamp(60px, 10vh, 140px);
  --section-pad-x: clamp(16px, 5vw, 80px);
  --container-max: 1200px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-xxl: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-round: 50%;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Transitions */
  --t-fast: 0.2s var(--ease-out-expo);
  --t-medium: 0.5s var(--ease-out-expo);
  --t-slow: 0.8s var(--ease-out-expo);
  --t-reveal: 1s var(--ease-out-expo);

  /* Z-index layers */
  --z-bg: -1;
  --z-particles: 1;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 500;
  --z-loader: 9000;
  --z-cursor: 9999;
}