/**
 * CSS Bridge - Freguesia App
 * 
 * Maps Bootstrap variables to design system tokens.
 * This ensures Bootstrap components use the same colors as the design system.
 * 
 * Purpose: Gradual migration from Bootstrap to Tailwind
 * - Bootstrap classes will use design system colors
 * - Allows existing templates to work during transition
 */

:root {
    /* ============================================
       Bootstrap Variable Mappings
       Map Bootstrap's expected variable names to design system tokens
       ============================================ */
    
    /* Bootstrap Primary Colors */
    --bs-primary: var(--color-primary-500);
    --bs-primary-rgb: 59, 130, 246;
    --bs-primary-hover: var(--color-primary-600);
    --bs-primary-active: var(--color-primary-700);
    
    /* Bootstrap Secondary Colors */
    --bs-secondary: var(--color-gray-500);
    --bs-secondary-rgb: 107, 114, 128;
    
    /* Bootstrap Success/Warning/Danger/Info */
    --bs-success: var(--color-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--color-error);
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: var(--color-info);
    --bs-info-rgb: 59, 130, 246;
    
    /* Bootstrap Neutral Colors */
    --bs-light: var(--color-gray-100);
    --bs-light-rgb: 243, 244, 246;
    --bs-dark: var(--color-gray-900);
    --bs-dark-rgb: 17, 24, 39;
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    --bs-black: #000000;
    --bs-black-rgb: 0, 0, 0;
    
    /* Bootstrap Body Colors */
    --bs-body-color: var(--color-gray-900);
    --bs-body-color-rgb: 17, 24, 39;
    --bs-body-bg: var(--color-gray-50);
    --bs-body-bg-rgb: 249, 250, 251;
    
    /* Bootstrap Border Colors */
    --bs-border-color: var(--color-gray-200);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    
    /* Bootstrap Link Colors */
    --bs-link-color: var(--color-primary-600);
    --bs-link-hover-color: var(--color-primary-700);
    
    /* Bootstrap Font */
    --bs-font-sans-serif: var(--font-sans);
    --bs-font-monospace: var(--font-mono);
    
    /* ============================================
       Affan Template Variable Mappings
       The PWA template uses these variable names
       ============================================ */
    
    /* Affan Primary Scale */
    --primary-50: var(--color-primary-50);
    --primary-100: var(--color-primary-100);
    --primary-200: var(--color-primary-200);
    --primary-300: var(--color-primary-300);
    --primary-400: var(--color-primary-400);
    --primary-500: var(--color-primary-500);
    --primary-600: var(--color-primary-600);
    --primary-700: var(--color-primary-700);
    --primary-800: var(--color-primary-800);
    --primary-900: var(--color-primary-900);
    --primary-950: var(--color-gray-950);
    
    /* Affan Secondary Scale */
    --secondary-50: var(--color-secondary-50);
    --secondary-100: var(--color-secondary-100);
    --secondary-200: var(--color-secondary-200);
    --secondary-300: var(--color-secondary-300);
    --secondary-400: var(--color-secondary-400);
    --secondary-500: var(--color-secondary-500);
    --secondary-600: var(--color-secondary-600);
    --secondary-700: var(--color-secondary-700);
    --secondary-800: var(--color-secondary-800);
    --secondary-900: var(--color-secondary-900);
    
    /* Affan Semantic Colors */
    --danger-500: var(--color-error);
    --success-500: var(--color-success);
    --warning-500: var(--color-warning);
    --info-500: var(--color-info);
    
    /* Affan Text Colors */
    --text: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    --heading: var(--color-gray-900);
    
    /* Affan Background */
    --white: #ffffff;
    --dark: var(--color-gray-900);
    
    /* ============================================
       RGB Values for rgba() usage
       ============================================ */
    --color-primary-500-rgb: 59, 130, 246;
    --color-secondary-500-rgb: 16, 185, 129;
    --color-accent-500-rgb: 245, 158, 11;
    --color-gray-500-rgb: 107, 114, 128;
    --color-error-rgb: 239, 68, 68;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 245, 158, 11;
    --color-info-rgb: 59, 130, 246;
}

/* ============================================
   Bootstrap Button Overrides
   Use design system colors for Bootstrap buttons
   ============================================ */

.btn-primary {
    --bs-btn-bg: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-600);
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-700);
    --bs-btn-disabled-bg: var(--color-primary-400);
    --bs-btn-disabled-border-color: var(--color-primary-400);
}

.btn-secondary {
    --bs-btn-bg: var(--color-gray-500);
    --bs-btn-border-color: var(--color-gray-500);
    --bs-btn-hover-bg: var(--color-gray-600);
    --bs-btn-hover-border-color: var(--color-gray-600);
    --bs-btn-active-bg: var(--color-gray-700);
    --bs-btn-active-border-color: var(--color-gray-700);
}

.btn-success {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-secondary-600);
    --bs-btn-hover-border-color: var(--color-secondary-600);
}

.btn-danger {
    --bs-btn-bg: var(--color-error);
    --bs-btn-border-color: var(--color-error);
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
}

.btn-warning {
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-bg: var(--color-accent-600);
    --bs-btn-hover-border-color: var(--color-accent-600);
}

.btn-info {
    --bs-btn-bg: var(--color-info);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-600);
}

/* Outline button variants */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary-600);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-bg: var(--color-primary-500);
    --bs-btn-hover-border-color: var(--color-primary-500);
    --bs-btn-active-bg: var(--color-primary-600);
    --bs-btn-active-border-color: var(--color-primary-600);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-gray-600);
    --bs-btn-border-color: var(--color-gray-500);
    --bs-btn-hover-bg: var(--color-gray-500);
    --bs-btn-hover-border-color: var(--color-gray-500);
}

/* ============================================
   Bootstrap Alert Overrides
   ============================================ */

.alert-primary {
    --bs-alert-bg: var(--color-primary-100);
    --bs-alert-border-color: var(--color-primary-200);
    --bs-alert-color: var(--color-primary-800);
}

.alert-success {
    --bs-alert-bg: var(--color-secondary-100);
    --bs-alert-border-color: var(--color-secondary-200);
    --bs-alert-color: var(--color-secondary-800);
}

.alert-danger {
    --bs-alert-bg: #fee2e2;
    --bs-alert-border-color: #fecaca;
    --bs-alert-color: #991b1b;
}

.alert-warning {
    --bs-alert-bg: var(--color-accent-100);
    --bs-alert-border-color: var(--color-accent-200);
    --bs-alert-color: var(--color-accent-800);
}

.alert-info {
    --bs-alert-bg: var(--color-primary-100);
    --bs-alert-border-color: var(--color-primary-200);
    --bs-alert-color: var(--color-primary-800);
}

/* ============================================
   Bootstrap Badge Overrides
   ============================================ */

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

.badge.bg-secondary {
    background-color: var(--color-gray-500) !important;
}

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

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

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

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

/* ============================================
   Bootstrap Form Overrides
   ============================================ */

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-500-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.form-check-input:focus {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-500-rgb), 0.25);
}

/* ============================================
   Bootstrap Card Overrides
   ============================================ */

.card {
    --bs-card-border-color: var(--color-gray-200);
    --bs-card-border-radius: var(--radius-xl);
    --bs-card-box-shadow: var(--shadow-sm);
}

/* ============================================
   Bootstrap Nav/Navbar Overrides
   ============================================ */

.nav-link {
    color: var(--color-gray-700);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-primary-600);
}

.nav-link.active {
    color: var(--color-primary-600);
}

.navbar-brand {
    color: var(--color-gray-900);
}

/* ============================================
   Bootstrap Progress Bar Overrides
   ============================================ */

.progress-bar {
    background-color: var(--color-primary-500);
}

.progress-bar.bg-success {
    background-color: var(--color-success) !important;
}

.progress-bar.bg-warning {
    background-color: var(--color-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--color-error) !important;
}

/* ============================================
   Bootstrap Spinner Overrides
   ============================================ */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--color-primary-500) !important;
}

/* ============================================
   Dark Mode Support
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-color: var(--color-gray-100);
        --bs-body-bg: var(--color-gray-900);
        --bs-border-color: var(--color-gray-700);
    }
}

.dark {
    --bs-body-color: var(--color-gray-100);
    --bs-body-bg: var(--color-gray-900);
    --bs-border-color: var(--color-gray-700);
}