@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  /* ── Backgrounds ── */
  --bg-primary:    #080808;
  --bg-secondary:  #0e0e0e;
  --bg-card:       #141414;
  --bg-card-hover: #1c1c1c;
  --bg-nav:        rgba(8, 8, 8, 0.92);

  /* ── Accent ── */
  --accent:        #C8202A;
  --accent-text:   #ffffff;
  --accent-dim:    rgba(200, 32, 42, 0.10);
  --accent-mid:    rgba(200, 32, 42, 0.24);
  --accent-glow:   0 0 40px rgba(200, 32, 42, 0.22);

  /* ── Text ── */
  --text-primary:   #F5F5F5;
  --text-secondary: #8A8A8A;
  --text-muted:     #505050;

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, 0.07);
  --border-accent: rgba(200, 32, 42, 0.34);

  /* ── Typography ── */
  --font-display:  'Bebas Neue', sans-serif;
  --font-heading:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* ── Layout ── */
  --nav-h:         72px;
  --pad-section:   clamp(80px, 11vw, 130px);
  --pad-x:         clamp(24px, 6vw, 80px);
  --max-w:         1320px;

  /* ── Radius ── */
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  18px;

  /* ── Transitions ── */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);
}