/* ============================================
   CSS VARIABLES — Theme System
   ============================================ */

:root {
  /* ── Colors ── */
  --color-bg:             #0B0B0C;
  --color-bg-secondary:   #111111;
  --color-bg-card:        #0F0F10;
  --color-text-primary:   #FFFFFF;
  --color-text-muted:     #B5B5B5;
  --color-text-dim:       #666666;
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-hover:   rgba(255, 255, 255, 0.2);
  --color-accent:         #2E6BFF;
  --color-accent-red:     #B11226;
  --color-grain:          rgba(255, 255, 255, 0.02);
  --color-shadow:         rgba(0, 0, 0, 0.5);
  --color-glow:           rgba(46, 107, 255, 0.15);

  /* ── Typography ── */
  --font-hero:            'Bebas Neue', 'Anton', 'Oswald', sans-serif;
  --font-body:            'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:              clamp(4rem, 15vw, 14rem);
  --fs-hero-sub:          clamp(2.5rem, 6vw, 6rem);
  --fs-section-title:     clamp(2rem, 5vw, 5rem);
  --fs-card-title:        clamp(1.2rem, 2vw, 1.8rem);
  --fs-body:              clamp(0.875rem, 1.2vw, 1rem);
  --fs-body-lg:           clamp(1rem, 1.5vw, 1.25rem);
  --fs-small:             clamp(0.7rem, 0.9vw, 0.8rem);
  --fs-label:             0.75rem;

  --fw-hero:              700;
  --fw-body:              400;
  --fw-medium:            500;
  --fw-semibold:          600;

  --ls-hero:              -1px;
  --ls-wide:              3px;
  --ls-body:              0.5px;

  --lh-body:              1.6;
  --lh-tight:             1.1;
  --lh-heading:           1.0;

  /* ── Spacing (numeric scale) ── */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --space-6:              1.5rem;
  --space-7:              1.75rem;
  --space-8:              2rem;
  --space-9:              2.5rem;
  --space-10:             3rem;
  --space-11:             3.5rem;
  --space-12:             4rem;

  /* ── Spacing (named) ── */
  --space-xs:             0.5rem;
  --space-sm:             1rem;
  --space-md:             2rem;
  --space-lg:             4rem;
  --space-xl:             6rem;
  --space-2xl:            8rem;
  --space-3xl:            12rem;
  --space-section:        clamp(6rem, 12vh, 12rem);

  /* ── Layout ── */
  --max-width:            1400px;
  --content-width:        1100px;
  --gutter:               clamp(1.5rem, 4vw, 4rem);

  /* ── Animation ── */
  --ease-out-expo:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:        0.3s;
  --duration-normal:      0.6s;
  --duration-slow:        1.2s;
  --duration-float:       6s;

  /* ── Borders ── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;

  /* ── Shadows ── */
  --shadow-card:          0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:    0 30px 80px rgba(0, 0, 0, 0.7);
  --shadow-glow:          0 0 60px rgba(46, 107, 255, 0.08);
}