/* ============================================
   VARIABLES CSS — AVDA
   Charte graphique officielle — Or métallique principal
   Dernière mise à jour : Juillet 2026
   ============================================ */

:root {
  /* ==========================================
     POLICE DE CARACTÈRES
     ========================================== */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Poppins', sans-serif;

  /* ==========================================
     TAILLES TYPOGRAPHIQUES
     ========================================== */
  --fs-display: clamp(2.75rem, 6vw, 4rem);
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 2.5vw, 1.35rem);
  --fs-h5: 1.1rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9rem;
  --fs-body-lg: 1.1rem;
  --fs-small: 0.85rem;
  --fs-xs: 0.75rem;
  --fs-caption: 0.7rem;

  /* ==========================================
     GRAISSES TYPOGRAPHIQUES
     ========================================== */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ==========================================
     IDENTITÉ VISUELLE — Brand Colors (INVERSÉ)
     ========================================== */
  --brand-primary: #DFA21A;
  --brand-primary-rgb: 223, 162, 26;
  --brand-accent: #13441E;
  --brand-accent-rgb: 19, 68, 30;

  /* ==========================================
     COULEURS THÉMATIQUES
     ========================================== */
  --theme-education: #0A5288;
  --theme-education-rgb: 10, 82, 136;
  --theme-health: #033B65;
  --theme-health-rgb: 3, 59, 101;
  --theme-agriculture: #3C821A;
  --theme-agriculture-rgb: 60, 130, 26;

  /* ==========================================
     VARIANTES CLAIRES — Thématiques
     ========================================== */
  --theme-education-light: #E8F0F7;
  --theme-health-light: #E6EEF3;
  --theme-agriculture-light: #EDF6E8;

  /* ==========================================
     VARIANTES FONCÉES — Thématiques
     ========================================== */
  --theme-education-dark: #073D66;
  --theme-health-dark: #022A4A;
  --theme-agriculture-dark: #2D6112;

  /* ==========================================
     STRUCTURE & TYPOGRAPHIE
     ========================================== */
  --text-dark: #2A1A0A;
  --text-dark-rgb: 42, 26, 10;
  --text-muted: #6B5D4F;
  --text-light: #8C7F73;
  --text-white: #FFFFFF;

  /* ==========================================
     FONDS — Or métallique principal
     ========================================== */
  --bg-main: #FFF8E7;
  --bg-surface: #FFF0D0;
  --bg-surface-rgb: 255, 240, 208;
  --bg-dark: #13441E;
  --bg-dark-rgb: 19, 68, 30;
  --bg-overlay: rgba(19, 68, 30, 0.85);
  --bg-overlay-light: rgba(19, 68, 30, 0.5);

  /* ==========================================
     BORDURES
     ========================================== */
  --border-color: #D0C8A0;
  --border-light: #E8DFC0;
  --border-focus: var(--brand-accent);

  /* ==========================================
     OMBRES
     ========================================== */
  --shadow-xs: 0 1px 2px rgba(42, 26, 10, 0.04);
  --shadow-sm: 0 2px 8px rgba(42, 26, 10, 0.06);
  --shadow-md: 0 4px 16px rgba(42, 26, 10, 0.08);
  --shadow-lg: 0 8px 32px rgba(42, 26, 10, 0.1);
  --shadow-xl: 0 16px 48px rgba(42, 26, 10, 0.12);
  --shadow-2xl: 0 24px 64px rgba(42, 26, 10, 0.16);
  --shadow-accent: 0 4px 20px rgba(19, 68, 30, 0.3);
  --shadow-primary: 0 4px 20px rgba(223, 162, 26, 0.25);

  /* ==========================================
     RAYONS DE BORDURE
     ========================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ==========================================
     ESPACEMENTS
     ========================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-very-slow: 0.8s ease;

  /* ==========================================
     Z-INDEX
     ========================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;
  --z-modal: 2000;
  --z-loader: 9999;
  --z-tooltip: 5000;

  /* ==========================================
     DIMENSIONS STRUCTURELLES
     ========================================== */
  --navbar-height: 80px;
  --navbar-height-scrolled: 65px;
  --container-max: 1200px;
  --container-narrow: 900px;
  --container-wide: 1400px;
  --sidebar-width: 300px;

  /* ==========================================
     DÉGRADÉS — Or métallique principal
     ========================================== */
  --gradient-primary: linear-gradient(135deg, #DFA21A 0%, #C58C10 100%);
  --gradient-accent: linear-gradient(135deg, #13441E 0%, #1A5A2A 100%);
  --gradient-dark: linear-gradient(180deg, rgba(223,162,26,0.95) 0%, rgba(197,140,16,0.85) 100%);
  --gradient-light: linear-gradient(180deg, #FFF0D0 0%, #FFE8B0 100%);
  --gradient-hero: linear-gradient(180deg, rgba(223,162,26,0.7) 0%, rgba(223,162,26,0.4) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,240,208,0) 0%, rgba(255,240,208,0.9) 100%);

  /* ==========================================
     VARIANTES DE BOUTONS
     ========================================== */
  --btn-primary-bg: var(--brand-accent);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg: #0F3517;
  --btn-accent-bg: var(--brand-primary);
  --btn-accent-color: var(--text-dark);
  --btn-accent-hover-bg: #C58C10;
  --btn-outline-color: var(--brand-accent);
  --btn-outline-border: var(--brand-accent);
  --btn-outline-hover-bg: var(--brand-accent);
  --btn-outline-hover-color: #FFFFFF;
  --btn-donate-bg: #E53E3E;
  --btn-donate-hover-bg: #C53030;
  --btn-donate-color: #FFFFFF;

  /* ==========================================
     HOVER GLOBAL
     ========================================== */
  --hover-lighten: rgba(255, 255, 255, 0.1);
  --hover-darken: rgba(0, 0, 0, 0.06);
}