/* ==========================================================================
   DESA55 Design Tokens — CSS Custom Properties
   Brand: DESA55 | Motorcycle Gaming Digital Platform
   Version: 1.0.0 | Updated: 2026
   ========================================================================== */

:root {
  /* ── Colors: Background ─────────────────────────────────────────────── */
  --bg-primary:       #0B1117;
  --bg-secondary:     #0F1923;
  --bg-tertiary:      #131E2B;
  --bg-card:          rgba(255, 255, 255, 0.04);
  --bg-card-hover:    rgba(255, 255, 255, 0.07);
  --bg-glass:         rgba(11, 17, 23, 0.72);
  --bg-glass-light:   rgba(34, 197, 94, 0.06);
  --bg-overlay:       rgba(11, 17, 23, 0.88);

  /* ── Colors: Brand ──────────────────────────────────────────────────── */
  --color-primary:    #22C55E;
  --color-primary-dark: #16A34A;
  --color-primary-darker: #15803D;
  --color-secondary:  #16A34A;
  --color-accent:     #84CC16;
  --color-accent-soft: rgba(132, 204, 22, 0.15);

  /* ── Colors: Neutral ────────────────────────────────────────────────── */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F8FAFC;
  --color-gray-100:   #F1F5F9;
  --color-gray-200:   #E2E8F0;
  --color-gray-300:   #CBD5E1;
  --color-gray-400:   #94A3B8;
  --color-gray-500:   #64748B;
  --color-gray-600:   #475569;
  --color-gray-700:   #334155;
  --color-gray-800:   #1E293B;
  --color-gray-900:   #0F172A;

  /* ── Colors: Semantic ───────────────────────────────────────────────── */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary:  #64748B;
  --color-text-inverse:   #0B1117;
  --color-border:         rgba(148, 163, 184, 0.12);
  --color-border-hover:   rgba(34, 197, 94, 0.30);
  --color-border-active:  rgba(34, 197, 94, 0.60);

  /* ── Colors: Status ─────────────────────────────────────────────────── */
  --color-success:    #22C55E;
  --color-warning:    #F59E0B;
  --color-error:      #EF4444;
  --color-info:       #3B82F6;

  /* ── Gradients ──────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #22C55E 0%, #84CC16 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(132,204,22,0.08) 100%);
  --gradient-dark:    linear-gradient(180deg, #0B1117 0%, #0F1923 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-hero:    linear-gradient(135deg, rgba(11,17,23,0.95) 0%, rgba(15,25,35,0.80) 50%, rgba(34,197,94,0.12) 100%);
  --gradient-card:    linear-gradient(145deg, rgba(34,197,94,0.08) 0%, rgba(11,17,23,0) 60%);
  --gradient-text:    linear-gradient(135deg, #22C55E 0%, #84CC16 100%);

  /* ── Typography: Font Families ──────────────────────────────────────── */
  --font-primary:   'Inter', system-ui, -apple-system, sans-serif;
  --font-display:   'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono:      'Space Grotesk', 'Fira Code', monospace;

  /* ── Typography: Font Sizes (fluid clamp) ───────────────────────────── */
  --text-xs:    clamp(0.69rem, 0.66rem + 0.18vw, 0.75rem);
  --text-sm:    clamp(0.81rem, 0.77rem + 0.22vw, 0.875rem);
  --text-base:  clamp(0.94rem, 0.90rem + 0.24vw, 1rem);
  --text-md:    clamp(1rem, 0.95rem + 0.27vw, 1.125rem);
  --text-lg:    clamp(1.13rem, 1.05rem + 0.38vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.13rem + 0.56vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.31rem + 0.94vw, 1.875rem);
  --text-3xl:   clamp(1.88rem, 1.56rem + 1.56vw, 2.5rem);
  --text-4xl:   clamp(2.25rem, 1.78rem + 2.34vw, 3.25rem);
  --text-5xl:   clamp(2.75rem, 2.09rem + 3.28vw, 4.25rem);
  --text-6xl:   clamp(3.25rem, 2.38rem + 4.34vw, 5.5rem);

  /* ── Typography: Font Weights ───────────────────────────────────────── */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ── Typography: Line Heights ───────────────────────────────────────── */
  --lh-none:    1;
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* ── Typography: Letter Spacing ─────────────────────────────────────── */
  --ls-tight:   -0.025em;
  --ls-normal:  0em;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-widest:  0.1em;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  /* ── Border Radius ──────────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-base:  16px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-2xl:   36px;
  --radius-full:  9999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.28);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.32);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.36);
  --shadow-glow:  0 0 30px rgba(34,197,94,0.20), 0 0 60px rgba(34,197,94,0.10);
  --shadow-glow-sm: 0 0 16px rgba(34,197,94,0.25);
  --shadow-glow-accent: 0 0 30px rgba(132,204,22,0.20);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.24);

  /* ── Blur ───────────────────────────────────────────────────────────── */
  --blur-sm:  8px;
  --blur-md:  16px;
  --blur-lg:  24px;
  --blur-xl:  40px;

  /* ── Transitions ────────────────────────────────────────────────────── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth:  600ms cubic-bezier(0.23, 1, 0.32, 1);

  /* ── Z-Index Scale ──────────────────────────────────────────────────── */
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-top:        999;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  1600px;
  --gutter:         clamp(1rem, 4vw, 2rem);
  --section-gap:    clamp(4rem, 8vw, 8rem);

  /* ── Nav ────────────────────────────────────────────────────────────── */
  --nav-height:     72px;
  --nav-height-sm:  60px;
}

/* Dark preference baseline (already dark-native) */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary:       #0B1117;
    --bg-secondary:     #0F1923;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:    0ms;
    --transition-base:    0ms;
    --transition-slow:    0ms;
    --transition-spring:  0ms;
    --transition-smooth:  0ms;
  }
}