/* ========================================
   BAT DIGEST - COLOR SYSTEM & VARIABLES
   Version 1.0 - Design Tokens
   ======================================== */

/* ========== COLOR SYSTEM ========== */
:root {
    /* Core color palette */
    --color-primary: #0d6efd;
    --color-primary-hover: #0052a3;
    --color-secondary: #6c757d;
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;
    --color-light: #f8f9fa;
    --color-dark: #212529;
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Grays */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    /* Semantic colors (reference core palette) */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--gray-100);
    --bg-tertiary: var(--gray-200);
    
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-600);
    
    --border-color: var(--gray-300);
    --border-light: var(--gray-200);
    --border-dark: var(--gray-400);
    
    /* Status colors for components */
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);
    
    /* Component colors */
    --primary-color: var(--color-primary);
    --primary-color-dark: var(--color-primary-hover);
    --primary-rgb: 13, 110, 253; /* RGB values for primary color */
    --text-on-primary: var(--color-white);
    
    --link-color: var(--color-primary);
    --link-hover: var(--color-primary-hover);
    --card-bg: var(--color-white);
    --navbar-bg: var(--color-white);
    --dropdown-bg: var(--color-white);
    --footer-bg: var(--gray-100);
    --input-bg: var(--color-white);
    --input-border: var(--gray-400);
    
    /* Shadows */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* Spacing scale */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-8: 6rem;
    
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --radius-pill: 50rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;
    
    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    
    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Breakpoints for reference */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* Brand colors */
    --amazon-primary: #FF9900;
    --amazon-hover: #e88600;
    --sidelineswap-primary: #00B67A;
    --sidelineswap-hover: #00a069;
    --justbats-primary: #003831;
    --justbats-hover: #00251f;
    --dicks-primary: #00693C;
    --dicks-hover: #005030;
    --closeout-primary: #DC3545;
    --closeout-hover: #c82333;
    
    /* Shadow color for transparency */
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark mode - Only change what's needed */
body.dark-mode {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #888888;
    
    --border-color: #333333;
    --border-light: #2a2a2a;
    --border-dark: #444444;
    
    --card-bg: #1a1a1a;
    --navbar-bg: #1a1a1a;
    --dropdown-bg: #222222;
    --footer-bg: #1a1a1a;
    --input-bg: #1a1a1a;
    --input-border: #444444;
    
    --primary-color: #4da3ff;
    --primary-color-dark: #2d8fe6;
    --primary-rgb: 77, 163, 255; /* RGB values for primary color in dark mode */
    --text-on-primary: var(--color-white);
    
    --link-color: #4da3ff;
    --link-hover: #80c0ff;
    
    /* Status colors for dark mode */
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.7);
    
    --shadow-color: rgba(0, 0, 0, 0.3);
}