/*
 * "Stadium Deco" Design System — CSS Custom Properties
 * Art Deco geometry meets World Cup stadium atmosphere
 */
:root {
  /* === Primary Palette === */
  --color-emerald-dark: #0A3D2E;
  --color-emerald: #0F5C42;
  --color-emerald-light: #147A56;
  --color-gold: #D4AF37;
  --color-gold-light: #E8C84A;
  --color-gold-dark: #A8882E;
  --color-cream: #F5F0E6;
  --color-cream-dark: #E8DFC8;
  --color-crimson: #8B1A2B;
  --color-crimson-light: #B22234;

  /* === Neutral === */
  --color-white: #FFFFFF;
  --color-black: #0D0D0D;
  --color-gray-100: #F0EDE4;
  --color-gray-200: #D4CFC0;
  --color-gray-300: #B8B0A0;
  --color-gray-400: #8A8270;
  --color-gray-600: #4A4540;
  --color-gray-800: #1E1E1E;

  /* === Light Theme: Background === */
  --color-bg-page: #F5F7FA;
  --color-bg-card: #FFFFFF;
  --color-bg-dark: #0A3D2E;
  --color-bg-dark-surface: rgba(10, 61, 46, 0.95);
  --color-bg-betting: #F0F7F4;
  --color-bg-banker: rgba(10, 95, 56, 0.06);
  --color-bg-value: rgba(212, 175, 55, 0.06);
  --color-bg-parlay: rgba(245, 158, 11, 0.05);
  --color-bg-risk-mgmt: rgba(229, 57, 53, 0.04);
  --color-border-light: #E5E6EB;

  /* === Light Theme: Text — WCAG AA compliant === */
  --color-text-primary: #1F2937;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #9CA3AF;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-sub: #E5E7EB;
  --color-accent: #0A5F38;
  --color-accent-light: #147A56;
  --color-risk: #E53935;
  --color-value: #F59E0B;
  --color-info: #2563EB;

  /* === Light Theme: Status Tags === */
  --color-status-upcoming-bg: #EFF6FF;
  --color-status-upcoming-text: #2563EB;
  --color-status-live-bg: #ECFDF5;
  --color-status-live-text: #059669;
  --color-status-completed-bg: #F3F4F6;
  --color-status-completed-text: #6B7280;

  /* === Light Theme: Shadows === */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);

  /* === Typography === */
  --font-display: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --font-body: 'DM Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

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

  /* === 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;
  --space-24: 6rem;

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

  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  /* Art deco geometric borders */
  --border-deco: var(--border-medium) solid var(--color-gold);
  --border-deco-dim: var(--border-thin) solid rgba(212, 175, 55, 0.3);

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 24px rgba(212, 175, 55, 0.2);
  --shadow-gold-lg: 0 0 48px rgba(212, 175, 55, 0.3);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Z-Index === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* === Layout === */
  --max-width: 1400px;
  --max-width-narrow: 900px;
  --header-height: 72px;
  --footer-height: 60px;
  --sidebar-width: 320px;
}