/* Design Tokens and CSS Variables */
:root {
  /* Color Palette */
  --color-bg: #0a0f0d;
  --color-surface: #111a16;
  --color-surface-alt: #162118;
  --color-accent: #c8f542;        /* electric lime */
  --color-accent-warm: #f5a742;   /* golden amber */
  --color-text: #e8ede9;
  --color-text-muted: #7a9180;
  --color-border: #1e2d24;
  --color-danger: #e05252;
  --color-success: #42f59b;
  
  /* Glassmorphism settings */
  --glass-bg: rgba(17, 26, 22, 0.7);
  --glass-border: rgba(30, 45, 36, 0.6);
  --glass-blur: blur(12px);

  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 4rem;

  /* Borders & Shadows */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 15px rgba(200, 245, 66, 0.25);
  
  /* Court Line Pattern */
  --court-grid: linear-gradient(rgba(30, 45, 36, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(30, 45, 36, 0.15) 1px, transparent 1px);
}

/* SVG Noise Overlay (grain) */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0.04;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}