/* ===== BetterCerts Theme System ===== */
/* Primary Color: #003b6f (Deep Professional Blue) */
/* Supports Light, Dark, and System theme modes */

:root {
    /* === Primary Brand Colors (Constant across themes) === */
    --color-primary: #003b6f;
    --color-primary-light: #004d8f;
    --color-primary-dark: #002947;
    --color-primary-50: rgba(0, 59, 111, 0.05);
    --color-primary-100: rgba(0, 59, 111, 0.1);
    --color-primary-200: rgba(0, 59, 111, 0.2);
    --color-primary-300: rgba(0, 59, 111, 0.3);
    --color-primary-500: rgba(0, 59, 111, 0.5);
    --color-primary-700: rgba(0, 59, 111, 0.7);

    /* === Secondary Colors === */
    --color-secondary: #0066cc;
    --color-secondary-light: #3385d6;
    --color-secondary-dark: #004d99;

    /* === Accent Colors === */
    --color-accent: #0099ff;
    --color-accent-light: #33adff;
    --color-accent-dark: #0077cc;

    /* === Semantic Colors === */
    --color-success: #26b050;
    --color-success-light: #51c070;
    --color-success-dark: #1e8a3e;
    
    --color-warning: #ed8936;
    --color-warning-light: #f2a365;
    --color-warning-dark: #dd6b20;
    
    --color-danger: #e53e3e;
    --color-danger-light: #eb6565;
    --color-danger-dark: #c82a2a;
    
    --color-info: #4299e1;
    --color-info-light: #68ade8;
    --color-info-dark: #2b7ab8;

    /* === Neutral Colors (Constant) === */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* === Contextual Colors (Theme-dependent) === */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --bg-tertiary: #edf2f7;
    --bg-elevated: #ffffff;
    
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-tertiary: #718096;
    --text-inverse: #ffffff;
    
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e0;
    
    --surface-overlay: rgba(0, 0, 0, 0.5);
    
    /* === Gray Scale (Light Theme) === */
    --color-gray-50: #f7fafc;
    --color-gray-100: #edf2f7;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e0;
    --color-gray-400: #a0aec0;
    --color-gray-500: #718096;
    --color-gray-600: #4a5568;
    --color-gray-700: #2d3748;
    --color-gray-800: #1a202c;
    --color-gray-900: #171923;

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    --gradient-dark: linear-gradient(180deg, var(--color-gray-700) 0%, var(--color-gray-800) 100%);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px 0 var(--color-primary-200);
    --shadow-danger: 0 4px 14px 0 rgba(229, 62, 62, 0.2);
    --shadow-warning: 0 4px 14px 0 rgba(237, 137, 54, 0.2);

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === Spacing (for consistency) === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* === Typography === */
    --font-family-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === Transitions === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === Z-Index === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== Override Bootstrap Default Colors ===== */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success-dark);
}

.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning-dark);
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger-dark);
}

/* ===== Links ===== */
a,
.btn-link {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:hover,
.btn-link:hover {
    color: var(--color-primary-light);
}

/* ===== Form Focus States ===== */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem var(--color-primary-100);
}

/* ===== Badges ===== */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--color-primary) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--color-danger) !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--color-warning) !important;
}

/* ===== Alerts ===== */
.alert-primary {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-dark);
}

.alert-danger {
    background-color: rgba(229, 62, 62, 0.1);
    border-color: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* ===== Tables ===== */
.table-hover tbody tr:hover {
    background-color: var(--color-primary-50);
}

/* ===== Utility Classes ===== */
.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* === Contextual Colors (Dark Mode) === */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-elevated: #2d3748;
    
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-inverse: #1a202c;
    
    --border-primary: #4a5568;
    --border-secondary: #2d3748;
    
    --surface-overlay: rgba(0, 0, 0, 0.7);
    
    /* === Adjusted Shadows for Dark Mode === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* Apply theme to body and common elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.modal-content,
.dropdown-menu {
    background-color: var(--bg-elevated);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.table {
    color: var(--text-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-secondary);
}

.form-control,
.form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Dark mode text colors */
[data-theme="dark"] .text-muted {
    color: var(--text-tertiary) !important;
}

/* Dark mode adjustments for alerts */
[data-theme="dark"] .alert-primary {
    background-color: rgba(0, 59, 111, 0.2);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(229, 62, 62, 0.2);
    border-color: var(--color-danger);
    color: var(--color-danger-light);
}