/* ==========================================================================
   Roster Fitness Design Tokens
   Dark, professional B2B sports analytics aesthetic.
   Inter for UI, system monospace for data.
   ========================================================================== */

:root {
  /* ---------- Core palette ---------- */
  --color-bg:            #0a0f1a;
  --color-surface:       #111827;
  --color-surface-alt:   #1a2235;
  --color-border:        #1f2937;
  --color-border-light:  #374151;

  --color-accent:        #3b82f6;
  --color-accent-hover:  #2563eb;
  --color-success:       #10b981;
  --color-warning:       #f59e0b;
  --color-critical:      #f43f5e;
  --color-caution:       #eab308;

  --color-text:          #e5e7eb;
  --color-text-muted:    #9ca3af;
  --color-text-dim:      #6b7280;
  --color-text-white:    #ffffff;

  /* ---------- Alpha scales ---------- */
  --white-5:  rgba(255, 255, 255, 0.05);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-80: rgba(255, 255, 255, 0.80);

  /* ---------- Fluid typography ---------- */
  --text-xs:      clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);
  --text-sm:      clamp(0.8125rem, 0.77rem + 0.24vw, 0.875rem);
  --text-base:    clamp(0.9375rem, 0.88rem + 0.30vw, 1.0625rem);
  --text-lg:      clamp(1.125rem, 1.03rem + 0.48vw, 1.3125rem);
  --text-xl:      clamp(1.375rem, 1.22rem + 0.73vw, 1.6875rem);
  --text-2xl:     clamp(1.75rem,  1.51rem + 1.09vw, 2.25rem);
  --text-3xl:     clamp(2.25rem,  1.87rem + 1.82vw, 3.125rem);
  --text-display: clamp(2.75rem,  2.15rem + 2.91vw, 4.125rem);

  /* ---------- Font families ---------- */
  --font-sans:  "Inter", system-ui, sans-serif;
  --font-mono:  ui-monospace, "Cascadia Code", "Fira Code", monospace;

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

  /* ---------- Section spacing ---------- */
  --section-xs: clamp(2rem,    1.5rem + 2.42vw,  3rem);
  --section-sm: clamp(3rem,    2.27rem + 3.64vw,  4.5rem);
  --section-md: clamp(4rem,    2.91rem + 5.45vw,  6.5rem);
  --section-lg: clamp(5rem,    3.64rem + 6.79vw,  8rem);

  /* ---------- Border radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 40px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);

  /* ---------- Transitions ---------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --max-width:       1200px;
  --max-width-narrow: 800px;
  --sidebar-width:   260px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
  }
}