/* ==========================================================================
   Enduro Tracker - Global CSS Variables Design System Tokens
   ========================================================================== */

:root {
  /* Brand & Theme Palette */
  --color-primary: #e7b708;
  --color-primary-hover: #ffffff;
  --color-primary-dark: #2563eb;
  --color-primary-dark-hover: #1d4ed8;
  --color-accent: #f97316;
  
  /* Text Colors */
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #ffffff;
  --color-text-dark: #000000;
  --color-text-heading-blue: #000099;
  --color-text-heading-alt: #0000aa;

  /* Backgrounds & Glassmorphism */
  --color-bg-main: #f1f5f9;
  --color-bg-light-glass: rgba(255, 255, 255, 0.85);
  --color-bg-drawer: rgba(255, 255, 255, 0.9);
  --color-bg-card: rgba(241, 245, 249, 0.8);
  
  /* Borders & Shadows */
  --color-border-card: rgba(226, 232, 240, 0.8);
  --color-border-glass: rgba(0, 0, 0, 0.12);
  --color-border-dark: #000000;
  --shadow-elevation: 0 6px 18px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.14);

  /* Typography */
  --font-ocr: "OCR A Std", serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-base: var(--font-inter);

  /* Borders & Radii */
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-pill: 12px;

  /* Animation & Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}