@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  /* Commercial Olive & Forest Green Sportsbook Palette (Reference Aligned) */
  --header-bg: #38662A;               /* Deep Olive Forest Green Header */
  --header-text: #FFFFFF;
  --header-btn-bg: #4C803B;           /* Rounded tool icon buttons */

  --color-primary: #38662A;          /* Forest Olive Primary Accent */
  --color-primary-dark: #2A4F20;
  --color-primary-light: #DEEADE;
  --color-accent-lime: #10B981;

  --color-success: #38662A;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;

  /* Light Theme - Soft Sage Background & Pure White Cards */
  --bg-page: #EAF2E8;                 /* Soft Sage Tinted Body Background */
  --bg-card: #FFFFFF;                 /* Crisp Pure White Cards */
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F2F7F1;
  --bg-accordion-header: #DEEADE;     /* Light Green Accordion Banner */

  /* Odds Chips Styling */
  --odds-chip-bg: #E8F3E6;           /* Mint Green Odds Buttons */
  --odds-chip-hover: #D7EAD4;
  --odds-chip-active: #C3EAA5;        /* Selected Active Odds Chip */

  --border-color: #D6E4D4;            /* Soft Sage Border */
  --border-color-hover: #B8D1B5;

  --text-primary: #1A2418;            /* High Contrast Dark Green-Black */
  --text-secondary: #52634F;          /* Medium Olive Gray */
  --text-muted: #7A8C77;              /* Muted Greenish Gray */
  --text-inverse: #FFFFFF;

  /* Specs: 60px Header Height & Layout Dimensions */
  --header-height: 60px;
  --sidebar-width: 250px;
  --betslip-width: 340px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', sans-serif;
  --font-mono: 'Manrope', monospace;

  /* Spacing System */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 9999px;

  /* Elevation Shadows */
  --shadow-subtle: 0 1px 3px rgba(46, 89, 32, 0.04);
  --shadow-card: 0 2px 8px rgba(46, 89, 32, 0.05);
  --shadow-elevated: 0 8px 24px rgba(46, 89, 32, 0.12);

  --glass-bg: rgba(56, 102, 42, 0.98);
  --glass-blur: blur(12px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.15);

  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme Overrides */
body.dark-theme,
[data-theme="dark"] {
  --header-bg: #1B2B18;
  --header-btn-bg: #2B4226;

  --bg-page: #0D140C;
  --bg-card: #142013;
  --bg-surface: #142013;
  --bg-surface-hover: #1E2E1C;
  --bg-accordion-header: #22361F;

  --odds-chip-bg: #1D301B;
  --odds-chip-hover: #274024;
  --odds-chip-active: #38662A;

  --border-color: #233621;
  --border-color-hover: #334E30;

  --text-primary: #FFFFFF;
  --text-secondary: #97AB94;
  --text-muted: #6B7D68;

  --glass-bg: rgba(27, 43, 24, 0.98);
}