/* ============================================
   P10 Whiskey League — Design Tokens
   Inspired by f1.com
   ============================================ */

:root {
  /* === Color Palette (Dark Theme — Default) === */
  --color-bg-primary:      #15151e;
  --color-bg-secondary:    #1e1e2a;
  --color-bg-tertiary:     #262636;
  --color-bg-card:         #1a1a28;
  --color-bg-elevated:     #22222f;
  --color-bg-hover:        #2a2a3a;
  --color-bg-input:        #1e1e2e;
  --color-bg-overlay:      rgba(0, 0, 0, 0.6);

  --color-text-primary:    #ffffff;
  --color-text-secondary:  #a0a0b8;
  --color-text-muted:      #6b6b80;
  --color-text-inverse:    #15151e;

  --color-accent:          #e10600;
  --color-accent-hover:    #ff1801;
  --color-accent-muted:    rgba(225, 6, 0, 0.15);
  --color-accent-text:     #ff4136;

  --color-success:         #00d26a;
  --color-success-muted:   rgba(0, 210, 106, 0.15);
  --color-warning:         #ffb800;
  --color-warning-muted:   rgba(255, 184, 0, 0.15);
  --color-danger:          #e10600;
  --color-danger-muted:    rgba(225, 6, 0, 0.15);
  --color-info:            #0090ff;

  --color-border:          rgba(255, 255, 255, 0.08);
  --color-border-strong:   rgba(255, 255, 255, 0.15);
  --color-divider:         rgba(255, 255, 255, 0.06);

  --color-gold:            #ffd700;
  --color-silver:          #c0c0c0;
  --color-bronze:          #cd7f32;

  /* === Team Colors === */
  --team-ferrari:       #dc0000;
  --team-mclaren:       #ff8700;
  --team-redbull:       #3671c6;
  --team-mercedes:      #27f4d2;
  --team-astonmartin:   #229971;
  --team-alpine:        #0090ff;
  --team-williams:      #64c4ff;
  --team-racingbulls:   #6692ff;
  --team-haas:          #b6babd;
  --team-sauber:        #52e252;
  --team-cadillac:      #1b3d2f;

  /* === Typography === */
  --font-primary:    'Titillium Web', 'Oxanium', system-ui, -apple-system, sans-serif;
  --font-display:    'Titillium Web', 'Oxanium', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-2xs:   0.6875rem;  /* 11px */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.875rem;   /* 14px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* === 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;

  /* === Layout === */
  --container-max:    1200px;
  --container-narrow: 900px;
  --nav-height:       60px;
  --sidebar-width:    240px;

  /* === Borders & Radii === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 20px rgba(225, 6, 0, 0.25);

  /* === Transitions === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ============================================
   Light Theme
   ============================================ */
[data-theme="light"] {
  --color-bg-primary:      #f5f5f8;
  --color-bg-secondary:    #ffffff;
  --color-bg-tertiary:     #eeeef2;
  --color-bg-card:         #ffffff;
  --color-bg-elevated:     #ffffff;
  --color-bg-hover:        #e8e8ee;
  --color-bg-input:        #ffffff;
  --color-bg-overlay:      rgba(0, 0, 0, 0.4);

  --color-text-primary:    #15151e;
  --color-text-secondary:  #4a4a5a;
  --color-text-muted:      #8888a0;
  --color-text-inverse:    #ffffff;

  --color-accent-text:     #c00500;

  --color-border:          rgba(0, 0, 0, 0.08);
  --color-border-strong:   rgba(0, 0, 0, 0.15);
  --color-divider:         rgba(0, 0, 0, 0.06);

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-glow:  0 0 20px rgba(225, 6, 0, 0.12);
}