/* =========================================================
   M8 Theme — Bootstrap 5.3.3 Complete Override (CORRECTED)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root,
[data-bs-theme="light"] {
    /* Brand Colors */
    --m8crc-primary: #4F73D9;
    --m8crc-secondary: #0D9488;
    --m8crc-tertiary: #64748B;
    --m8crc-success: #15803D;
    --m8crc-info: #0EA5E9;
    --m8crc-warning: #D97706;
    --m8crc-danger: #B91C1C;
    
    /* Surfaces - LIGHT backgrounds */
    --m8crc-surface-base: #FFFFFF;
    --m8crc-surface-raised: #F8FAFC;
    --m8crc-surface-overlay: #F1F5F9;
    
    /* Text Colors - DARK text on light backgrounds */
    --m8crc-text-primary: var(--m8crc-primary);
    --m8crc-text-secondary: var(--m8crc-secondary);
    --m8crc-text-base: #1E293B;
    --m8crc-text-subdued: #64748B;
    --m8crc-text-muted: #94A3B8;
    --m8crc-text-on-primary: #FFFFFF;
    --m8crc-text-on-secondary: #FFFFFF;
    
    /* Borders - LIGHT borders */
    --m8crc-border-subtle: #E2E8F0;
    --m8crc-border-medium: #CBD5E1;
    --m8crc-border-strong: #94A3B8;
    --m8crc-border-primary: var(--m8crc-primary);
    --m8crc-border-secondary: var(--m8crc-secondary);
    
    /* ========== BOOTSTRAP OVERRIDES ========== */
    /* Theme colors */
    --bs-primary: var(--m8crc-primary);
    --bs-secondary: var(--m8crc-secondary);
    --bs-success: var(--m8crc-success);
    --bs-info: var(--m8crc-info);
    --bs-warning: var(--m8crc-warning);
    --bs-danger: var(--m8crc-danger);
    --bs-light: #F8FAFC;
    --bs-dark: #1E293B;
    
    /* Theme RGB values */
    --bs-primary-rgb: 79, 115, 217;
    --bs-secondary-rgb: 13, 148, 136;
    --bs-success-rgb: 21, 128, 61;
    --bs-info-rgb: 14, 165, 233;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger-rgb: 185, 28, 28;
    --bs-light-rgb: 248, 250, 252;
    --bs-dark-rgb: 30, 41, 59;
    
    /* Body */
    --bs-body-color: var(--m8crc-text-base);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--m8crc-surface-base);
    --bs-body-bg-rgb: 255, 255, 255;
    
    /* Emphasis colors */
    --bs-emphasis-color: var(--m8crc-text-base);
    --bs-emphasis-color-rgb: 30, 41, 59;
    
    /* Secondary and Tertiary backgrounds */
    --bs-secondary-color: var(--m8crc-text-subdued);
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-secondary-bg: var(--m8crc-surface-raised);
    --bs-secondary-bg-rgb: 248, 250, 252;
    
    --bs-tertiary-color: var(--m8crc-text-muted);
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-tertiary-bg: var(--m8crc-surface-overlay);
    --bs-tertiary-bg-rgb: 241, 245, 249;
    
    /* Links */
    --bs-link-color: var(--m8crc-primary);
    --bs-link-color-rgb: 79, 115, 217;
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--m8crc-secondary);
    --bs-link-hover-color-rgb: 13, 148, 136;
    
    /* Borders */
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--m8crc-border-subtle);
    --bs-border-color-translucent: rgba(226, 232, 240, 0.5);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    
    /* Headings */
    --bs-heading-color: var(--m8crc-text-base);
    
    /* Code */
    --bs-code-color: var(--m8crc-secondary);
    
    /* Highlight */
    --bs-highlight-color: var(--m8crc-text-base);
    --bs-highlight-bg: #FEF3C7;
    
    /* Forms */
    --bs-form-valid-color: var(--m8crc-success);
    --bs-form-valid-border-color: var(--m8crc-success);
    --bs-form-invalid-color: var(--m8crc-danger);
    --bs-form-invalid-border-color: var(--m8crc-danger);
}

[data-bs-theme="dark"] {
    /* Brand Colors - Adjusted for dark backgrounds */
    --m8crc-primary: #6B8FEC;
    --m8crc-secondary: #14B8A6;
    --m8crc-tertiary: #94A3B8;
    --m8crc-success: #22C55E;
    --m8crc-info: #38BDF8;
    --m8crc-warning: #FBBF24;
    --m8crc-danger: #F87171;
    
    /* Surfaces - DARK backgrounds */
    --m8crc-surface-base: #0F172A;
    --m8crc-surface-raised: #1E293B;
    --m8crc-surface-overlay: #334155;
    
    /* Text Colors - LIGHT text on dark backgrounds */
    --m8crc-text-primary: var(--m8crc-primary);
    --m8crc-text-secondary: var(--m8crc-secondary);
    --m8crc-text-base: #F1F5F9;
    --m8crc-text-subdued: #CBD5E1;
    --m8crc-text-muted: #94A3B8;
    --m8crc-text-on-primary: #FFFFFF;
    --m8crc-text-on-secondary: #FFFFFF;
    
    /* Borders - DARK borders */
    --m8crc-border-subtle: #334155;
    --m8crc-border-medium: #475569;
    --m8crc-border-strong: #64748B;
    --m8crc-border-primary: var(--m8crc-primary);
    --m8crc-border-secondary: var(--m8crc-secondary);
    
    /* ========== BOOTSTRAP OVERRIDES ========== */
    /* Theme colors */
    --bs-primary: var(--m8crc-primary);
    --bs-secondary: var(--m8crc-secondary);
    --bs-success: var(--m8crc-success);
    --bs-info: var(--m8crc-info);
    --bs-warning: var(--m8crc-warning);
    --bs-danger: var(--m8crc-danger);
    --bs-light: #334155;
    --bs-dark: #0C1222;
    
    /* Theme RGB values */
    --bs-primary-rgb: 107, 143, 236;
    --bs-secondary-rgb: 20, 184, 166;
    --bs-success-rgb: 34, 197, 94;
    --bs-info-rgb: 56, 189, 248;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger-rgb: 248, 113, 113;
    --bs-light-rgb: 51, 65, 85;
    --bs-dark-rgb: 12, 18, 34;
    
    /* Body */
    --bs-body-color: var(--m8crc-text-base);
    --bs-body-color-rgb: 241, 245, 249;
    --bs-body-bg: var(--m8crc-surface-base);
    --bs-body-bg-rgb: 15, 23, 42;
    
    /* Emphasis colors */
    --bs-emphasis-color: var(--m8crc-text-base);
    --bs-emphasis-color-rgb: 241, 245, 249;
    
    /* Secondary and Tertiary backgrounds */
    --bs-secondary-color: var(--m8crc-text-subdued);
    --bs-secondary-color-rgb: 203, 213, 225;
    --bs-secondary-bg: var(--m8crc-surface-raised);
    --bs-secondary-bg-rgb: 30, 41, 59;
    
    --bs-tertiary-color: var(--m8crc-text-muted);
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-tertiary-bg: var(--m8crc-surface-overlay);
    --bs-tertiary-bg-rgb: 51, 65, 85;
    
    /* Links */
    --bs-link-color: var(--m8crc-primary);
    --bs-link-color-rgb: 107, 143, 236;
    --bs-link-hover-color: var(--m8crc-secondary);
    --bs-link-hover-color-rgb: 20, 184, 166;
    
    /* Borders */
    --bs-border-color: var(--m8crc-border-subtle);
    --bs-border-color-translucent: rgba(51, 65, 85, 0.5);
    
    /* Headings */
    --bs-heading-color: var(--m8crc-text-base);
    
    /* Code */
    --bs-code-color: var(--m8crc-secondary);
    
    /* Highlight */
    --bs-highlight-color: var(--m8crc-text-base);
    --bs-highlight-bg: #92400E;
    
    /* Forms */
    --bs-form-valid-color: var(--m8crc-success);
    --bs-form-valid-border-color: var(--m8crc-success);
    --bs-form-invalid-color: var(--m8crc-danger);
    --bs-form-invalid-border-color: var(--m8crc-danger);
}

/* ========== COMPONENT OVERRIDES ========== */

/* Buttons */
.btn-primary {
    --bs-btn-color: var(--m8crc-text-on-primary);
    --bs-btn-bg: var(--m8crc-primary);
    --bs-btn-border-color: var(--m8crc-primary);
    --bs-btn-hover-bg: var(--m8crc-primary);
    --bs-btn-hover-border-color: var(--m8crc-primary);
    --bs-btn-active-bg: var(--m8crc-primary);
    --bs-btn-active-border-color: var(--m8crc-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(0.9);
}

.btn-secondary {
    --bs-btn-color: var(--m8crc-text-on-secondary);
    --bs-btn-bg: var(--m8crc-secondary);
    --bs-btn-border-color: var(--m8crc-secondary);
    --bs-btn-hover-bg: var(--m8crc-secondary);
    --bs-btn-hover-border-color: var(--m8crc-secondary);
    --bs-btn-active-bg: var(--m8crc-secondary);
    --bs-btn-active-border-color: var(--m8crc-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    filter: brightness(0.9);
}

/* Outline Buttons */
.btn-outline-primary {
    --bs-btn-color: var(--m8crc-primary);
    --bs-btn-border-color: var(--m8crc-primary);
    --bs-btn-hover-color: var(--m8crc-text-on-primary);
    --bs-btn-hover-bg: var(--m8crc-primary);
    --bs-btn-active-color: var(--m8crc-text-on-primary);
    --bs-btn-active-bg: var(--m8crc-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--m8crc-secondary);
    --bs-btn-border-color: var(--m8crc-secondary);
    --bs-btn-hover-color: var(--m8crc-text-on-secondary);
    --bs-btn-hover-bg: var(--m8crc-secondary);
    --bs-btn-active-color: var(--m8crc-text-on-secondary);
    --bs-btn-active-bg: var(--m8crc-secondary);
}

/* Text utilities */
.text-primary {
    color: var(--m8crc-text-primary) !important;
}

.text-secondary {
    color: var(--m8crc-text-secondary) !important;
}

.text-muted {
    color: var(--m8crc-text-muted) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--m8crc-border-primary) !important;
}

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

/* Background utilities */
.bg-primary {
    background-color: var(--m8crc-primary) !important;
    color: var(--m8crc-text-on-primary) !important;
}

.bg-secondary {
    background-color: var(--m8crc-secondary) !important;
    color: var(--m8crc-text-on-secondary) !important;
}

/* Custom tertiary background class */
.bg-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-tertiary-color) !important;
}

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

.badge.bg-secondary {
    background-color: var(--m8crc-secondary) !important;
    color: var(--m8crc-text-on-secondary) !important;
}

/* Alerts */
.alert-primary {
    --bs-alert-color: var(--m8crc-primary);
    --bs-alert-bg: rgba(79, 115, 217, 0.1);
    --bs-alert-border-color: var(--m8crc-border-primary);
}

.alert-secondary {
    --bs-alert-color: var(--m8crc-secondary);
    --bs-alert-bg: rgba(13, 148, 136, 0.1);
    --bs-alert-border-color: var(--m8crc-border-secondary);
}

/* Typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Cormorant Garamond', serif;
}