/* ============================================================================
   FOOTYSTATS-STYLE VARIABLES
   Clean, professional, data-focused design system
   ============================================================================ */

:root {
    /* ===== Primary Brand Colors ===== */
    --primary-green: #629670;
    --primary-dark: #4a7c59;
    --primary-light: #7fb090;
    
    /* ===== Confidence/Statistical Colors ===== */
    --confidence-high: #22c55e;      /* Bright green - 70%+ */
    --confidence-medium: #f59e0b;     /* Amber - 50-69% */
    --confidence-low: #ef4444;        /* Red - <50% */
    
    /* ===== Supporting Colors ===== */
    --info-blue: #3b82f6;
    --accent-teal: #14b8a6;
    --neutral-gray: #6b7280;
    
    /* ===== Background Shades ===== */
    --bg-success: #dcfce7;           /* Light green */
    --bg-warning: #fef3c7;           /* Light amber */
    --bg-danger: #fee2e2;            /* Light red */
    --bg-info: #dbeafe;              /* Light blue */
    --bg-neutral: #f3f4f6;           /* Light gray */
    
    /* ===== Text Colors ===== */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    
    /* ===== Background Colors ===== */
    --background-primary: #ffffff;
    --background-secondary: #f1f3f4;
    --background-tertiary: #e8eaed;
    --background-page: #f1f3f4; /* Darker dimmed grey background */
    
    /* ===== Border Colors ===== */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;
    
    /* ===== Spacing (FootyStats-style - compact) ===== */
    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 10px;
    --spacing-lg: 14px;
    --spacing-xl: 20px;
    --spacing-2xl: 28px;
    
    /* ===== Typography ===== */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 13px;
    --font-size-lg: 15px;
    --font-size-xl: 17px;
    --font-size-2xl: 19px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* ===== Shadows (Subtle, FootyStats-style) ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ===== Breakpoints (Mobile First) ===== */
    --breakpoint-sm: 640px;   /* Small devices */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Laptops */
    --breakpoint-xl: 1280px;  /* Desktops */
    
    /* ===== Table-specific ===== */
    --table-border: var(--border-light);
    --table-hover: #f9fafb;
    --table-stripe: #fafafa;
    
    /* ===== Form Badge Sizes ===== */
    --badge-size: 24px;
    --badge-size-sm: 20px;
    
    /* ===== Legacy Support (for existing code) ===== */
    --global-palette1: #25443d;
    --global-palette2: #629670;
    --global-palette3: #1A202C;
    --global-palette4: #343a40;
    --global-palette5: #4A5568;
    --global-palette6: #bac7d1;
    --global-palette7: #eaf2ea;
    --global-palette8: #f3f7f4;
    --global-palette9: #ffffff;
}

/* ===== Responsive Font Sizes ===== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 13px;
        --font-size-lg: 15px;
        --font-size-xl: 17px;
    }
}