/**
 * CSS Custom Properties (Variables)
 * Bolão Brasil Copa 2026
 */

:root,
[data-theme="light"] {
  /* Colors */
  --color-bg: #f0f4f0;
  --color-surface: #ffffff;
  --color-surface-2: #f7faf7;
  --color-border: rgba(0,0,0,0.10);
  --color-text: #111a0e;
  --color-text-muted: #4a5e44;
  --color-text-faint: #8a9e84;
  --color-primary: #006b2b;
  --color-primary-hover: #004f1f;
  --color-gold: #f0c000;
  --color-gold-dark: #c09000;
  --color-input-bg: #edf5ed;
  --color-input-border: #a8c8a0;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,50,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,50,0,0.12);
  --shadow-lg: 0 12px 40px rgba(0,50,0,0.16);
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  
  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Transitions */
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);
}

/* System preference for light mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: #f0f4f0;
    --color-surface: #fff;
    --color-surface-2: #f7faf7;
    --color-border: rgba(0,0,0,.10);
    --color-text: #111a0e;
    --color-text-muted: #4a5e44;
    --color-text-faint: #8a9e84;
    --color-primary: #006b2b;
    --color-primary-hover: #004f1f;
    --color-gold: #f0c000;
    --color-gold-dark: #c09000;
    --color-input-bg: #edf5ed;
    --color-input-border: #a8c8a0;
    --shadow-sm: 0 1px 3px rgba(0,50,0,.08);
    --shadow-md: 0 4px 16px rgba(0,50,0,.12);
    --shadow-lg: 0 12px 40px rgba(0,50,0,.16);
  }
}