/* ══════════════════════════════════════════════════
   WMR — Design Tokens
   Wrap My Ride — wrapmyride.nu
   ══════════════════════════════════════════════════ */

:root {
  /* ── Colori ── */
  --bg:           #1a1a1a;
  --bg-alt:       #111111;
  --bg-deep:      #0d0d0d;
  --surface:      #222222;
  --accent:       #7B2FFF;
  --accent-hover: #8B3FFF;
  --accent-light: #A06AFF;
  --accent-dim:   rgba(123, 47, 255, 0.15);
  --accent-glow:  rgba(123, 47, 255, 0.4);
  --white:        #f5f5f5;
  --muted:        #a0a0a0;
  --border:       rgba(255, 255, 255, 0.07);

  /* ── Tipografia ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Spaziature ── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  140px;

  /* ── Layout ── */
  --page-pad:       48px;
  --page-pad-mobile: 20px;
  --nav-height:     72px;

  /* ── Transizioni ── */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.2s ease;

  /* ── Breakpoint (riferimento — usati in media query) ── */
  /* Mobile: < 768px */
  /* Tablet: 768px – 1024px */
  /* Desktop: > 1024px */
}