/* NoBall Design System - Variables & Tokens */
:root {
  /* Colors */
  --color-bg-base: #0F172A;
  --color-bg-card: #1E293B;
  --color-bg-elevated: #334155;
  
  --color-accent-primary: #10B981;
  --color-accent-primary-hover: #059669;
  
  --color-accent-secondary: #F59E0B;
  --color-accent-secondary-hover: #D97706;

  --color-text-high: #F8FAFC;
  --color-text-muted: #94A3B8;

  --color-success: #10B981;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  --color-odds-back-bg: #DBEAFE;
  --color-odds-back-text: #1E3A8A;
  --color-odds-lay-bg: #FCE7F3;
  --color-odds-lay-text: #9D174D;

  /* Typography */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 14px;
  --font-size-caption: 12px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows / Glass */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --glass-bg: rgba(15, 23, 42, 0.7);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-high);
  font-family: var(--font-family-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--font-size-h1); font-weight: 700; margin-bottom: var(--space-2); }
h2 { font-size: var(--font-size-h2); font-weight: 600; margin-bottom: var(--space-2); }
h3 { font-size: var(--font-size-h3); font-weight: 500; margin-bottom: var(--space-1); }
p { font-size: var(--font-size-body); margin-bottom: var(--space-2); }
.text-muted { color: var(--color-text-muted); }
.caption { font-size: var(--font-size-caption); }
html[data-low-bandwidth="true"] .hero-banner img,
html[data-low-bandwidth="true"] .promotion-banner img,
html[data-low-bandwidth="true"] .promo-banner img {
  display: none;
}