/* ============================================
   CCB Corporate Design System V2
   Theme Colors - Couleurs Thématiques Dynamiques
   Caisse des Compensations du Bâtiment - Genève
   Version: 2.0
   Date: Janvier 2026
   ============================================ */

/* ========== BOOTSTRAP CSS VARIABLE OVERRIDES ========== */
/* Redefinir les variables Bootstrap pour que TOUTES les transitions,
   focus rings et etats actifs utilisent les couleurs corporate
   au lieu du bleu Bootstrap par defaut (#0d6efd). */
:root {
    --bs-primary: #ff6900;
    --bs-primary-rgb: 255, 105, 0;
    --bs-focus-ring-color: rgba(255, 105, 0, 0.25);
    --bs-focus-ring-width: 0.25rem;
    --bs-link-color: #ff6900;
    --bs-link-color-rgb: 255, 105, 0;
    --bs-link-hover-color: #e65c00;
    --bs-link-hover-color-rgb: 230, 92, 0;
}

.btn-primary {
    --bs-btn-bg: #ff6900;
    --bs-btn-border-color: #ff6900;
    --bs-btn-hover-bg: #e65c00;
    --bs-btn-hover-border-color: #e65c00;
    --bs-btn-focus-shadow-rgb: 255, 105, 0;
    --bs-btn-active-bg: #e65c00;
    --bs-btn-active-border-color: #cc5200;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: #ff6900;
    --bs-btn-disabled-border-color: #ff6900;
}

.btn-outline-primary {
    --bs-btn-color: #ff6900;
    --bs-btn-border-color: #ff6900;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff6900;
    --bs-btn-hover-border-color: #ff6900;
    --bs-btn-focus-shadow-rgb: 255, 105, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff6900;
    --bs-btn-active-border-color: #ff6900;
}

/* ========== THÈME PRINCIPAL ========== */
:root {
    /* Couleur principale - CCB Orange (Identité) */
    --theme-primary: var(--ccb-orange);
    --theme-primary-50: var(--ccb-orange-50);
    --theme-primary-100: var(--ccb-orange-100);
    --theme-primary-200: var(--ccb-orange-200);
    --theme-primary-300: var(--ccb-orange-300);
    --theme-primary-400: var(--ccb-orange-400);
    --theme-primary-500: var(--ccb-orange);
    --theme-primary-600: var(--ccb-orange-800);
    --theme-primary-700: var(--ccb-orange-900);
    --theme-primary-800: var(--ccb-orange-900);
    --theme-primary-900: var(--ccb-orange-900);

    /* Couleur secondaire - CCB Yellow (Informations, Web LNO) */
    --theme-secondary: var(--ccb-yellow);
    --theme-secondary-50: var(--ccb-yellow-50);
    --theme-secondary-100: var(--ccb-yellow-100);
    --theme-secondary-200: var(--ccb-yellow-200);
    --theme-secondary-300: var(--ccb-yellow-300);
    --theme-secondary-400: var(--ccb-yellow-400);
    --theme-secondary-500: var(--ccb-yellow);
    --theme-secondary-600: var(--ccb-yellow-800);
    --theme-secondary-700: var(--ccb-yellow-900);
    --theme-secondary-800: var(--ccb-yellow-900);
    --theme-secondary-900: var(--ccb-yellow-900);

    /* Couleurs sémantiques */
    --theme-success: var(--success);
    --theme-success-100: var(--success-100);
    --theme-success-900: var(--success-900);

    --theme-warning: var(--warning);
    --theme-warning-100: var(--warning-100);
    --theme-warning-900: var(--warning-900);

    --theme-danger: var(--danger);
    --theme-danger-100: var(--danger-100);
    --theme-danger-900: var(--danger-900);

    --theme-info: var(--info);  /* Bleu clair spécifique pour l'information */
    --theme-info-100: var(--info-100);
    --theme-info-900: var(--info-900);

    /* Couleurs neutres */
    --theme-gray-50: var(--gray-50);
    --theme-gray-100: var(--gray-100);
    --theme-gray-200: var(--gray-200);
    --theme-gray-300: var(--gray-300);
    --theme-gray-400: var(--gray-400);
    --theme-gray-500: var(--gray-500);
    --theme-gray-600: var(--gray-600);
    --theme-gray-700: var(--gray-700);
    --theme-gray-800: var(--gray-800);
    --theme-gray-900: var(--gray-900);

    /* Couleurs de surface */
    --theme-surface: var(--white);
    --theme-surface-elevated: var(--gray-50);
    --theme-surface-hover: var(--gray-100);

    /* Couleurs de texte */
    --theme-text-primary: var(--gray-900);
    --theme-text-secondary: var(--gray-700);
    --theme-text-muted: var(--gray-500);
    --theme-text-inverse: var(--white);

    /* Couleurs de bordure */
    --theme-border: var(--gray-200);
    --theme-border-focus: var(--theme-primary);
    --theme-border-hover: var(--gray-300);
}

/* ========== VARIATIONS DE THÈME ========== */

/* Thème alternatif (si besoin) */
[data-theme="alternative"] {
    /* Peut être utilisé pour des variations saisonnières ou contextuelles */
    --theme-secondary: var(--ccb-orange);
    --theme-primary: var(--ccb-yellow);
}

/* ========== CLASSES UTILITAIRES DE COULEURS ========== */

/* Classes de couleur de fond */
.bg-theme-primary { background-color: var(--theme-primary); }
.bg-theme-secondary { background-color: var(--theme-secondary); }
.bg-theme-success { background-color: var(--theme-success); }
.bg-theme-warning { background-color: var(--theme-warning); }
.bg-theme-danger { background-color: var(--theme-danger); }
.bg-theme-info { background-color: var(--theme-info); }

/* Classes de couleur de texte */
.text-theme-primary { color: var(--theme-primary); }
.text-theme-secondary { color: var(--theme-secondary); }
.text-theme-success { color: var(--theme-success); }
.text-theme-warning { color: var(--theme-warning); }
.text-theme-danger { color: var(--theme-danger); }
.text-theme-info { color: var(--theme-info); }

/* Classes de couleur de bordure */
.border-theme-primary { border-color: var(--theme-primary); }
.border-theme-secondary { border-color: var(--theme-secondary); }
.border-theme-success { border-color: var(--theme-success); }
.border-theme-warning { border-color: var(--theme-warning); }
.border-theme-danger { border-color: var(--theme-danger); }
.border-theme-info { border-color: var(--theme-info); }

/* ========== DOCUMENTATION ========== */
/*
GUIDE D'UTILISATION DU THÈME:

1. COULEURS THÉMATIQUES
   - --theme-primary: Couleur principale (Orange CCB)
   - --theme-secondary: Couleur secondaire (Jaune)
   - --theme-success/warning/danger: Couleurs sémantiques classiques
   - --theme-info: Couleur d'information (Bleu clair #66BBFF)

2. UTILISATION RECOMMANDÉE
   - Boutons primaires: --theme-primary (Orange)
   - Boutons secondaires: --theme-secondary (Jaune)
   - États: --theme-success (Vert), --theme-warning (Orange), --theme-danger (Rouge), --theme-info (Bleu clair)
   - Textes: --theme-text-primary, --theme-text-secondary, --theme-text-muted

3. CLASSES UTILITAIRES
   - .bg-theme-primary: Fond couleur primaire
   - .text-theme-primary: Texte couleur primaire
   - .border-theme-primary: Bordure couleur primaire

4. AVANTAGES
   - Changement facile de thème: modifier les variables --ccb-orange et --ccb-yellow
   - Cohérence: toutes les couleurs dérivent des variables de base
   - Maintenabilité: un seul endroit pour modifier les couleurs
   - Encapsulation: séparation claire entre design tokens et utilisation

5. COULEURS ACTUELLES
   - Couleur secondaire (--theme-secondary): Jaune (#ffaa00)
   - Couleur info (--theme-info): Bleu clair (#66bbff)
   - Les deux couleurs sont distinctes et cohérentes avec l'identité CCB

EXEMPLES:
  .btn-primary { background-color: var(--theme-primary); }
  .alert-info { background-color: var(--theme-info-100); color: var(--theme-info); }
  .card { border-color: var(--theme-border); }
*/