/* 
 * UMan Design System - Variables CSS
 * Version: 2.1 - Branding ACDC (Action Citoyenne Démocratique)
 * Description: Variables CSS isolées pour le système UMan avec identité ACDC
 * Note: Ce fichier doit être chargé AVANT uman-design-system.css
 */

/* Import des polices Google Fonts pour le branding ACDC */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;400;700&family=Merriweather:wght@400;700&display=swap');

:root {
  /* ========================================
     PALETTE PRINCIPALE ACDC
     ======================================== */
  
  /* Bleu minuit (#0F1A2E) : Souveraineté, structure, puissance */
  --acdc-bleu-minuit: #0F1A2E;
  --acdc-bleu-minuit-light: #1a2a47;
  --acdc-bleu-minuit-dark: #0a111f;
  
  /* Bleu démocratique (#2243A2) : Confiance, clarté */
  --acdc-bleu-democratique: #2243A2;
  --acdc-bleu-democratique-light: #2d56c7;
  --acdc-bleu-democratique-dark: #1a3480;
  
  /* Blanc pur (#FFFFFF) : Transparence, vérité */
  --acdc-blanc-pur: #FFFFFF;
  
  /* Or civique (#D4A526) : Valeur, souveraineté, fondations */
  --acdc-or-civique: #D4A526;
  --acdc-or-civique-light: #e8b84d;
  --acdc-or-civique-dark: #b8901f;
  
  /* Rouge action (#C64141) : Courage, refus du statu quo */
  --acdc-rouge-action: #C64141;
  --acdc-rouge-action-light: #d85a5a;
  --acdc-rouge-action-dark: #a83535;
  
  /* ========================================
     PALETTE SECONDAIRE ACDC
     ======================================== */
  
  /* Gris perle (#E5E5E5) – Neutralité et documentation */
  --acdc-gris-perle: #E5E5E5;
  --acdc-gris-perle-light: #f0f0f0;
  --acdc-gris-perle-dark: #d0d0d0;
  
  /* Vert citoyen (#2EA673) – Espoir, vitalité, santé civique */
  --acdc-vert-citoyen: #2EA673;
  --acdc-vert-citoyen-light: #3fc289;
  --acdc-vert-citoyen-dark: #25855a;
  
  /* ========================================
     COULEURS PRINCIPALES UMAN (Compatibilité)
     ======================================== */
  
  --uman-bleu-gris-doux: #E9F0F7;
  --uman-vert-menthe-clair: #007763e5;
  --uman-turquoise-cyan-doux: #007763;
  --uman-rose-peche-pale: #F7D9D5;
  --uman-gris-anthracite-doux: #2E3A45;

  /* Couleurs dérivées */
  --uman-bleu-gris-tres-clair: #F5F8FC;
  --uman-vert-menthe-tres-clair: #E8F8F2;
  --uman-turquoise-tres-clair: #B8F0F3;
  --uman-rose-peche-tres-clair: #FCF2F0;
  --uman-gris-anthracite-clair: #4A5A6B;

  /* Compat variables (aliases sans préfixe pour compatibilité) */
  --bleu-gris-doux: var(--uman-bleu-gris-doux);
  --vert-menthe-clair: var(--uman-vert-menthe-clair);
  --turquoise-cyan-doux: var(--uman-turquoise-cyan-doux);
  --rose-peche-pale: var(--uman-rose-peche-pale);
  --gris-anthracite-doux: var(--uman-gris-anthracite-doux);
  --bleu-gris-tres-clair: var(--uman-bleu-gris-tres-clair);
  --vert-menthe-tres-clair: var(--uman-vert-menthe-tres-clair);
  --turquoise-tres-clair: var(--uman-turquoise-tres-clair);
  --rose-peche-tres-clair: var(--uman-rose-peche-tres-clair);
  --gris-anthracite-clair: var(--uman-gris-anthracite-clair);

  /* ========================================
     OMBRES UMAN
     ======================================== */
  
  --uman-clay-shadow-light: 0 6px 20px rgba(46, 58, 69, 0.25);
  --uman-clay-shadow-medium: 0 12px 40px rgba(46, 58, 69, 0.35);
  --uman-clay-shadow-heavy: 0 20px 60px rgba(46, 58, 69, 0.45);
  --uman-glass-shadow: 0 8px 32px rgba(46, 58, 69, 0.1);

  /* Compat aliases */
  --clay-shadow-light: var(--uman-clay-shadow-light);
  --clay-shadow-medium: var(--uman-clay-shadow-medium);
  --clay-shadow-heavy: var(--uman-clay-shadow-heavy);
  --glass-shadow: var(--uman-glass-shadow);

  /* ========================================
     GLASSMORPHISM UMAN
     ======================================== */
  
  --uman-glass-bg: rgba(255, 255, 255, 0.637);
  --uman-glass-bg-dark: rgba(0, 0, 0, 0.1);
  --uman-glass-blur: blur(20px);
  --uman-glass-border: rgba(255, 255, 255, 0.2);

  /* Compat aliases */
  --glass-bg: var(--uman-glass-bg);
  --glass-bg-dark: var(--uman-glass-bg-dark);
  --glass-blur: var(--uman-glass-blur);
  --glass-border: var(--uman-glass-border);

  /* ========================================
     GRADIENTS ACDC
     ======================================== */
  
  --acdc-gradient-primary: linear-gradient(135deg, var(--acdc-bleu-minuit) 0%, var(--acdc-bleu-democratique) 100%);
  --acdc-gradient-sovereignty: linear-gradient(135deg, var(--acdc-bleu-minuit) 0%, var(--acdc-bleu-democratique) 50%, var(--acdc-or-civique) 100%);
  --acdc-gradient-action: linear-gradient(135deg, var(--acdc-rouge-action) 0%, var(--acdc-or-civique) 100%);
  --acdc-gradient-citizen: linear-gradient(135deg, var(--acdc-vert-citoyen) 0%, var(--acdc-bleu-democratique) 100%);
  --acdc-gradient-transparency: linear-gradient(135deg, var(--acdc-blanc-pur) 0%, var(--acdc-gris-perle) 100%);

  /* ========================================
     GRADIENTS UMAN (Compatibilité)
     ======================================== */
  
  --uman-primary-gradient: var(--acdc-gradient-primary);
  --uman-secondary-gradient: var(--acdc-gradient-action);
  --uman-accent-gradient: var(--acdc-gradient-citizen);
  --uman-success-gradient: linear-gradient(135deg, var(--acdc-vert-citoyen) 0%, #38f9d7 100%);
  --uman-warning-gradient: linear-gradient(135deg, var(--acdc-or-civique) 0%, var(--acdc-rouge-action) 100%);

  /* Compat aliases */
  --primary-gradient: var(--acdc-gradient-primary);
  --secondary-gradient: var(--acdc-gradient-action);
  --accent-gradient: var(--acdc-gradient-citizen);
  --success-gradient: var(--uman-success-gradient);
  --warning-gradient: var(--uman-warning-gradient);

  /* ========================================
     TYPOGRAPHIE ACDC
     ======================================== */
  
  /* Polices recommandées ACDC */
  --acdc-font-title: 'Montserrat', 'Oswald', sans-serif;
  --acdc-font-paragraph: 'Inter', 'Lato', sans-serif;
  --acdc-font-official: 'Merriweather', serif;
  
  /* Tailles de police ACDC */
  --acdc-font-size-xs: 0.75rem;    /* 12px */
  --acdc-font-size-sm: 0.875rem;  /* 14px */
  --acdc-font-size-base: 1rem;    /* 16px */
  --acdc-font-size-lg: 1.125rem;  /* 18px */
  --acdc-font-size-xl: 1.5rem;    /* 24px */
  --acdc-font-size-2xl: 2rem;     /* 32px */
  --acdc-font-size-3xl: 3rem;     /* 48px */
  --acdc-font-size-4xl: 4rem;     /* 64px */
  
  /* Poids de police */
  --acdc-font-weight-light: 300;
  --acdc-font-weight-normal: 400;
  --acdc-font-weight-medium: 500;
  --acdc-font-weight-semibold: 600;
  --acdc-font-weight-bold: 700;
  --acdc-font-weight-extrabold: 800;

  /* ========================================
     TYPOGRAPHIE UMAN (Compatibilité)
     ======================================== */
  
  --uman-text-primary: #2d3748;
  --uman-text-secondary: #4a5568;
  --uman-text-tertiary: #718096;
  --uman-text-light: #a0aec0;

  /* Compat aliases */
  --text-primary: var(--acdc-bleu-minuit);
  --text-secondary: var(--acdc-bleu-democratique);
  --text-tertiary: var(--acdc-gris-perle-dark);
  --text-light: var(--acdc-gris-perle);

  /* ========================================
     BORDER RADIUS UMAN (PAS de conflit - valeurs spécifiques UMan)
     ======================================== */
  
  --uman-radius-sm: 8px;
  --uman-radius-md: 12px;
  --uman-radius-lg: 16px;
  --uman-radius-xl: 20px;
  --uman-radius-full: 50px;

  /* Compat aliases */
  --radius-sm: var(--uman-radius-sm);
  --radius-md: var(--uman-radius-md);
  --radius-lg: var(--uman-radius-lg);
  --radius-xl: var(--uman-radius-xl);
  --radius-full: var(--uman-radius-full);

  /* Note: --border-radius-* sont utilisées dans les styles avancés */
  --uman-border-radius-sm: 8px;
  --uman-border-radius-md: 12px;
  --uman-border-radius-lg: 16px;
  --uman-border-radius-xl: 24px;

  /* Compat aliases */
  --border-radius-sm: var(--uman-border-radius-sm);
  --border-radius-md: var(--uman-border-radius-md);
  --border-radius-lg: var(--uman-border-radius-lg);
  --border-radius-xl: var(--uman-border-radius-xl);

  /* ========================================
     ESPACEMENT UMAN (Valeurs spécifiques UMan plus généreuses)
     ======================================== */
  
  /* Note: Ces valeurs sont DIFFÉRENTES de main.css intentionnellement */
  /* UMan utilise des espacements plus généreux pour un design aéré */
  
  --uman-spacing-xs: 0.5rem;    /* vs main.css: 0.25rem */
  --uman-spacing-sm: 1rem;      /* vs main.css: 0.5rem */
  --uman-spacing-md: 1.5rem;    /* vs main.css: 1rem */
  --uman-spacing-lg: 2rem;      /* vs main.css: 1.5rem */
  --uman-spacing-xl: 3rem;      /* vs main.css: 2rem */

  /* PAS d'aliases pour l'espacement - utiliser --uman-spacing-* dans les composants UMan */

  /* ========================================
     TYPOGRAPHIE UMAN (Tailles de police)
     ======================================== */
  
  --uman-font-size-sm: 14px;
  --uman-font-size-base: 16px;
  --uman-font-size-lg: 18px;
  --uman-font-size-xl: 24px;
  --uman-font-size-2xl: 32px;
  --uman-font-size-3xl: 48px;

  /* Compat aliases */
  --font-size-sm: var(--uman-font-size-sm);
  --font-size-base: var(--uman-font-size-base);
  --font-size-lg: var(--uman-font-size-lg);
  --font-size-xl: var(--uman-font-size-xl);
  --font-size-2xl: var(--uman-font-size-2xl);
  --font-size-3xl: var(--uman-font-size-3xl);

  /* ========================================
     TRANSITIONS UMAN
     ======================================== */
  
  --uman-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --uman-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --uman-transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Compat aliases */
  --transition-fast: var(--uman-transition-fast);
  --transition-smooth: var(--uman-transition-smooth);
  --transition-bounce: var(--uman-transition-bounce);

  /* ========================================
     COULEURS SPÉCIFIQUES POUR COMPATIBILITÉ
     ======================================== */
  
  /* Couleurs ACDC comme couleurs principales */
  --primary-color: var(--acdc-bleu-democratique);
  --secondary-color: var(--acdc-or-civique);
  --success-color: var(--acdc-vert-citoyen);
  --error-color: var(--acdc-rouge-action);
  --warning-color: var(--acdc-or-civique);
  --info-color: var(--acdc-bleu-democratique);
  --danger-color: var(--acdc-rouge-action);
  
  /* Couleurs UMan (Compatibilité) */
  --uman-turquoise-cyan-doux: var(--acdc-bleu-democratique);
  --uman-vert-menthe-clair: var(--acdc-vert-citoyen);
  --uman-royal: var(--acdc-blanc-pur);
  --bleu-royal: var(--acdc-bleu-democratique);
  
  /* ========================================
     VARIABLES ICONOGRAPHIE ACDC
     ======================================== */
  
  /* Concept musical : Chefs d'orchestre → Orchestres → Harmonie citoyenne */
  --acdc-icon-conductor: '🎼'; /* Chef d'orchestre : Coordination, leadership citoyen */
  --acdc-icon-stands: '📋';     /* Pupitres : Cercles et comités */
  --acdc-icon-sheet: '📄';      /* Partitions : Propositions, projets citoyens */
  --acdc-icon-orchestra: '🎵';  /* Orchestre complet : Le peuple en action */
}

/* ========================================
   VARIABLES SPÉCIFIQUES AUX PAGES UMAN
   ======================================== */

/* Ces variables sont utilisées UNIQUEMENT dans les composants .uman-* */
/* Elles NE DOIVENT PAS affecter les autres composants du site */

/* Note: Les composants UMan utilisent les variables --uman-* pour l'isolation */