/**
 * Design Tokens - Rebelle Rally Public Scoring
 * Extracted from overlay design system
 * Primary influence: /overlay/src/styles/theme.css and design-system.ts
 */

:root {
  /* ============================================
     COLORS - Overlay Design System
     ============================================ */

  /* Primary Brand - Rebelle Rally Blue */
  --color-primary: #189FDA;
  --color-primary-hover: #1db9ff;
  --color-primary-active: #0e7aa8;
  --color-navy: #0C2340;

  /* Backgrounds - Dark Theme (Primary) */
  --bg-page: #0A0A0A;
  --bg-panel: rgba(15, 34, 62, 0.95);
  --bg-panel-solid: #0F223E;
  --bg-row-alternate: rgba(0, 0, 0, 0.15);
  --bg-overlay: rgba(0, 0, 0, 0.2);
  --bg-header: rgba(0, 0, 0, 0.2);

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-accent: #189FDA;

  /* Borders */
  --border-primary: #189FDA;
  --border-accent: #189FDA;
  --border-subtle: rgba(24, 159, 218, 0.3);
  --border-row: rgba(24, 159, 218, 0.6);

  /* Shadows */
  --shadow-panel:
    0 0 40px rgba(24, 159, 218, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.7);
  --shadow-tab: 0 4px 12px rgba(24, 159, 218, 0.6);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);

  /* ============================================
     TYPOGRAPHY - Overlay System
     ============================================ */

  /* Font Families */
  --font-heading: 'Oswald', Impact, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --text-hero: 74px;
  --text-h1: 42px;
  --text-h2: 28px;
  --text-h3: 24px;
  --text-large: 25px;
  --text-medium: 22px;
  --text-normal: 20px;
  --text-base: 18px;
  --text-small: 16px;
  --text-tiny: 14px;
  --text-micro: 12px;

  /* Font Weights */
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;

  /* Letter Spacing */
  --spacing-tight: -0.02em;
  --spacing-normal: 0.02em;
  --spacing-wide: 0.05em;

  /* Line Heights */
  --leading-tight: 1;
  --leading-normal: 1.3;
  --leading-relaxed: 1.6;

  /* ============================================
     SPACING - Overlay System
     ============================================ */

  --space-xs: 3px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 60px;

  /* Component Specific */
  --row-padding: 8px 0;
  --cell-gap: 16px;
  --panel-padding: 40px;
  --tab-height: 60px;

  /* ============================================
     LAYOUT - Overlay Dimensions
     ============================================ */

  --panel-max-width: 1400px;
  --panel-min-height: 900px;
  --content-max-width: 1400px;

  /* Grid Columns (Standings Table) - Location column removed */
  --col-rank: 60px;
  --col-team: 100px;
  --col-driver: 420px;
  --col-vehicle: 380px;
  --col-total: 120px;
  --col-percent: 120px;

  /* ============================================
     BORDERS & RADIUS
     ============================================ */

  --border-width: 3px;
  --border-width-thin: 0.5px;
  --border-width-medium: 2.5px;
  --radius-sm: 4px;
  --radius-md: 8px;
   --radius-lg: 16px;

  /* ============================================
     ANIMATIONS
     ============================================ */

  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease-out;

  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */

  --z-background: -1;
  --z-base: 0;
  --z-panel: 10;
  --z-tabs: 20;
  --z-modal: 100;
}

/* ============================================
   LIGHT MODE OVERRIDES (Optional)
   ============================================ */

:root[data-theme="light"] {
  --bg-page: #FFFFFF;
  --bg-panel: rgba(255, 255, 255, 0.98);
  --bg-panel-solid: #FFFFFF;
  --bg-row-alternate: rgba(0, 0, 0, 0.02);
  --bg-overlay: rgba(0, 0, 0, 0.0);
  --bg-header: rgba(0, 0, 0, 0.0);

  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-accent: #0C2340;

  --border-subtle: rgba(24, 159, 218, 0.2);
  --border-row: rgba(24, 159, 218, 0.4);

  --shadow-panel:
    0 0 20px rgba(24, 159, 218, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.08);
}