/**
 * 21Count.com Color Palette
 * Consistent brand colors used across the entire website
 */

:root {
    /* Primary Brand Colors - Based on count_table.php dark theme */
    --primary-dark: #161212;          /* Very dark background - main sections */
    --primary-medium: #2c2c2c;        /* Medium dark - secondary elements */
    --primary-light: #333333;         /* Light dark - borders, subtle backgrounds */
    
    /* Accent Colors - Based on count_table.php */
    --accent-blue: #007bff;           /* Primary blue - main highlights, borders */
    --accent-blue-dark: #0056b3;      /* Darker blue - hover states */
    --accent-blue-light: #17a2b8;     /* Cyan blue - secondary headings */
    
    /* Success/Positive Colors */
    --success-green: #28a745;         /* Success messages, positive actions */
    --success-green-dark: #1e7e34;    /* Hover states for success elements */
    --success-green-light: #075b0f;   /* Background green from gradient */
    
    /* Warning/Attention Colors */
    --warning-orange: #ffc107;        /* Warning messages, guest mode */
    --warning-orange-dark: #e0a800;   /* Hover states for warnings */
    --warning-orange-light: #fff3cd;  /* Light warning backgrounds */
    
    /* Error/Danger Colors */
    --error-red: #dc3545;            /* Error messages, danger actions */
    --error-red-dark: #c82333;       /* Hover states for errors */
    --error-red-light: #f8d7da;      /* Light error backgrounds */
    
    /* Neutral Colors - Dark theme based */
    --neutral-white: #ffffff;         /* Pure white text */
    --neutral-light: #f8f9fa;        /* Light text color */
    --neutral-medium: #e9ecef;       /* Medium light text */
    --neutral-dark: #6c757d;         /* Muted text */
    --neutral-darker: #495057;       /* Darker muted text */
    
    /* Text Colors - Dark theme optimized */
    --text-primary: #f8f9fa;         /* Primary text color - light on dark */
    --text-secondary: #e9ecef;       /* Secondary text color */
    --text-muted: #6c757d;           /* Muted text color */
    --text-light: #ffffff;           /* Pure white text */
    
    /* Background Colors - Dark theme */
    --bg-primary: #161212;           /* Primary dark background */
    --bg-secondary: #2c2c2c;         /* Secondary dark background */
    --bg-tertiary: #333333;          /* Tertiary background */
    --bg-dark: #000000;              /* Pure black background */
    --bg-gradient: linear-gradient(to bottom, #075b0f 0%, #061f0a 100%); /* Main site gradient */
    
    /* Border Colors - Dark theme */
    --border-light: rgba(255, 255, 255, 0.1);   /* Light borders */
    --border-medium: rgba(255, 255, 255, 0.2);  /* Medium borders */
    --border-dark: #333333;                      /* Dark borders */
    
    /* Shadow Colors - Enhanced for dark theme */
    --shadow-light: rgba(0, 0, 0, 0.3);     /* Light shadows */
    --shadow-medium: rgba(0, 0, 0, 0.4);    /* Medium shadows */
    --shadow-dark: rgba(0, 0, 0, 0.6);      /* Dark shadows */
    
    /* Gradient Colors - Based on count_table.php */
    --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
    --gradient-blue: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
    --gradient-green: linear-gradient(135deg, var(--success-green) 0%, var(--primary-medium) 100%);
    --gradient-orange: linear-gradient(135deg, var(--warning-orange) 0%, var(--warning-orange-dark) 100%);
    --gradient-site: linear-gradient(to bottom, #075b0f 0%, #061f0a 100%);
    
    /* Card/Component Colors */
    --card-bg: var(--neutral-white);
    --card-border: var(--border-light);
    --card-shadow: var(--shadow-light);
    --card-hover-shadow: var(--shadow-medium);
    
    /* Button Colors */
    --btn-primary-bg: var(--accent-blue);
    --btn-primary-hover: var(--accent-blue-dark);
    --btn-success-bg: var(--success-green);
    --btn-success-hover: var(--success-green-dark);
    --btn-warning-bg: var(--warning-orange);
    --btn-warning-hover: var(--warning-orange-dark);
    --btn-danger-bg: var(--error-red);
    --btn-danger-hover: var(--error-red-dark);
    
    /* Form Colors */
    --input-border: var(--border-medium);
    --input-focus: var(--accent-blue);
    --input-bg: var(--neutral-white);
    
    /* Navigation Colors */
    --nav-bg: var(--bg-dark);
    --nav-text: var(--text-light);
    --nav-hover: var(--accent-blue);
    
    /* Game/Interactive Colors */
    --game-bg: var(--bg-secondary);
    --game-card-bg: var(--neutral-white);
    --game-highlight: var(--accent-blue-light);
    
    /* Statistics Colors */
    --stat-positive: var(--success-green);
    --stat-negative: var(--error-red);
    --stat-neutral: var(--neutral-dark);
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #404040;
        --text-primary: #ffffff;
        --text-secondary: #b3b3b3;
        --card-bg: #2d2d2d;
        --card-border: #404040;
    }
}

/* Utility classes for quick color application */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success-green) !important; }
.text-warning { color: var(--warning-orange) !important; }
.text-danger { color: var(--error-red) !important; }
.text-info { color: var(--accent-blue) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-success { background-color: var(--success-green) !important; }
.bg-warning { background-color: var(--warning-orange) !important; }
.bg-danger { background-color: var(--error-red) !important; }
.bg-info { background-color: var(--accent-blue) !important; }

.border-primary { border-color: var(--border-light) !important; }
.border-success { border-color: var(--success-green) !important; }
.border-warning { border-color: var(--warning-orange) !important; }
.border-danger { border-color: var(--error-red) !important; }
.border-info { border-color: var(--accent-blue) !important; }

/* Component-specific color classes */
.btn-brand-primary {
    background: var(--gradient-blue);
    border: none;
    color: var(--text-light);
}

.btn-brand-primary:hover {
    background: var(--btn-primary-hover);
    color: var(--text-light);
}

.btn-brand-success {
    background: var(--gradient-green);
    border: none;
    color: var(--text-light);
}

.btn-brand-success:hover {
    background: var(--btn-success-hover);
    color: var(--text-light);
}

.btn-brand-warning {
    background: var(--gradient-orange);
    border: none;
    color: var(--text-light);
}

.btn-brand-warning:hover {
    background: var(--btn-warning-hover);
    color: var(--text-light);
}

.card-brand {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 10px var(--card-shadow);
    transition: box-shadow 0.3s ease;
}

.card-brand:hover {
    box-shadow: 0 4px 20px var(--card-hover-shadow);
}

.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-blue {
    background: var(--gradient-blue);
}

.gradient-green {
    background: var(--gradient-green);
}

.gradient-orange {
    background: var(--gradient-orange);
}