/* ==========================================================================
   NX PLUS SPORTS — DESIGN TOKENS (css/nxplus-tokens.css)
   Dual Theme Architecture: Authority Dark (Default) & Athletic Modern Light
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root, [data-theme="dark"] {
  /* Brand Core Palette */
  --nx-navy-dark: #07101F;       /* Deep Authority Canvas */
  --nx-navy-mid: #0F1B31;        /* Elevated Dark Surfaces */
  --nx-navy-light: #182846;      /* Borders & Accents on Dark */
  --nx-red: #E4002B;             /* High-Energy Primary Action Red */
  --nx-red-hover: #C50025;       /* Red Hover / Active State */
  --nx-red-glow: rgba(228, 0, 43, 0.28);
  --nx-gold: #FFC400;            /* Athletic Yellow / Gold Highlight */
  --nx-gold-hover: #E5B000;
  
  /* Neutral Palette */
  --nx-white: #FFFFFF;
  --nx-offwhite: #F8FAFC;
  --nx-slate-50: #F1F5F9;
  --nx-slate-100: #E2E8F0;
  --nx-slate-200: #CBD5E1;
  --nx-slate-300: #94A3B8;
  --nx-slate-400: #64748B;
  --nx-slate-500: #475569;
  --nx-slate-600: #334155;
  --nx-slate-700: #1E293B;
  --nx-slate-800: #0F172A;
  --nx-black: #020617;

  /* Status Colors */
  --nx-success: #10B981;
  --nx-success-bg: rgba(16, 185, 129, 0.12);
  --nx-warning: #F59E0B;
  --nx-warning-bg: rgba(245, 158, 11, 0.12);
  --nx-danger: #EF4444;
  --nx-danger-bg: rgba(239, 68, 68, 0.12);
  --nx-info: #0284C7;
  --nx-info-bg: rgba(2, 132, 199, 0.12);

  /* Semantic Theme Variables (Dark Mode Default) */
  --color-page-bg: #07101F;
  --color-surface-card: #0F1B31;
  --color-surface-hover: #182846;
  --color-surface-subtle: rgba(255, 255, 255, 0.04);
  --color-text-main: #FFFFFF;
  --color-text-body: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-header-bg: rgba(7, 16, 31, 0.94);
  --color-utility-bg: #040912;
  --color-footer-bg: #040912;
  --color-input-bg: rgba(255, 255, 255, 0.06);
  --color-input-border: rgba(255, 255, 255, 0.15);

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Responsive Fluid Type Scale */
  --text-hero: clamp(2.75rem, 6.5vw, 4.75rem);
  --text-h1: clamp(2.25rem, 5vw, 3.5rem);
  --text-h2: clamp(1.85rem, 3.75vw, 2.65rem);
  --text-h3: clamp(1.35rem, 2.5vw, 1.85rem);
  --text-h4: clamp(1.15rem, 2vw, 1.4rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Spacing Grid */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.12);
  --shadow-glow-red: 0 0 28px var(--nx-red-glow);
  --shadow-card-dark: 0 10px 36px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Max Widths */
  --container-max: 1280px;
  --container-wide: 1440px;
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */
[data-theme="light"] {
  --color-page-bg: #F8FAFC;
  --color-surface-card: #FFFFFF;
  --color-surface-hover: #F1F5F9;
  --color-surface-subtle: #F1F5F9;
  --color-text-main: #0B1528;
  --color-text-body: #334155;
  --color-text-muted: #64748B;
  --color-border: #E2E8F0;
  --color-header-bg: rgba(255, 255, 255, 0.96);
  --color-utility-bg: #0B1528;
  --color-footer-bg: #07101F;
  --color-input-bg: #FFFFFF;
  --color-input-border: #CBD5E1;
  --shadow-card-dark: 0 10px 30px rgba(11, 21, 40, 0.08);
}