/* ============================================
   OutRival Sports — Design Tokens
   Source of truth for all design values
   ============================================ */

:root {
  /* ---- Brand Accents ---- */
  --color-lime: #d1fd0c;
  --color-purple: #7a2be0;
  --color-purple-muted: #7e58ac;
  --color-pink: #f81ab2;
  --color-blue: #057cd8;

  /* ---- Neutral Scale ---- */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f9f9f9;
  --color-gray-150: #f6f6f6;
  --color-gray-200: #e9e9e9;
  --color-gray-250: #DFE4EA;
  --color-gray-300: #D9D9D9;
  --color-gray-400: #bcbcbc;
  --color-gray-500: #AAAAAA;
  --color-gray-600: #909090;
  --color-gray-700: #666666;
  --color-gray-750: #5F5F5F;
  --color-gray-800: #444444;
  --color-gray-850: #323232;
  --color-gray-900: #242424;
  --color-gray-925: #232323;
  --color-gray-950: #222222;
  --color-black-light: #181818;
  --color-black: #121212;
  --color-true-black: #000000;

  /* ---- Semantic Colors ---- */
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-500);
  --color-text-muted: var(--color-gray-700);
  --color-text-on-light: var(--color-gray-850);
  --color-bg-page: var(--color-true-black);
  --color-bg-surface: var(--color-black-light);
  --color-bg-elevated: var(--color-gray-900);
  --color-border: var(--color-gray-400);
  --color-border-subtle: var(--color-gray-750);

  /* ---- Team Theming Defaults ---- */
  --team-primary: var(--color-true-black);
  --team-accent: var(--color-lime);
  --team-text: var(--color-white);

  /* ---- Typography ---- */
  --font-family-primary: 'Inter', system-ui, -apple-system, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --heading-sm: 24px;
  --heading-md: 32px;
  --heading-lg: 40px;
  --heading-xl: 48px;
  --heading-2xl: 58px;

  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ---- Spacing (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 15px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}