/* ═════════════════════════════════════════════════════════════
   VARIABLES.CSS
   Système de design centralisé — sources uniques pour les couleurs,
   typographies, espacements, et animations de tout le site.
   ═════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap");

:root {
  /* ─ TYPOGRAPHIES ──────────────────────────────────────────────── */
  --font-family-base: "DM Sans", system-ui, sans-serif; /* Police principale pour contenu */
  --font-family-display: "Playfair Display", Georgia, serif; /* Police élégante pour titres */
  --font-size-base: 1rem; /* Taille de base : 16px */
  --font-size-sm: 0.85rem; /* Petit texte (métadonnées, labels) */
  --font-size-xs: 0.75rem; /* Très petit texte (badges, infos) */
  --font-weight-light: 300; /* Poids fin pour accents */
  --font-weight-medium: 400; /* Poids normal (défaut body) */
  --font-weight-semibold: 500; /* Poids semi-gras (emphase) */

  /* ─ COULEURS : Thème sombre (noir/gris) + accent bleu ────────── */
  --color-text-primary: #f2f4f7; /* Texte principal (blanc cassé) */
  --color-text-secondary: #d8dde6; /* Texte secondaire (gris clair) */
  --color-text-tertiary: #9ba4b2; /* Texte tertiaire (gris moyen) */
  --color-text-quaternary: #626b78; /* Texte léger/désactivé (gris foncé) */
  --color-bg-primary: #08090b; /* Fond principal (noir profond) */
  --color-bg-secondary: #0e1014; /* Fond secondaire (navbar, footer) */
  --color-bg-tertiary: #151820; /* Fond tertaire (blocs surlignés) */
  --color-border: #1e2330; /* Lignes de séparation */
  --color-accent: #2979ff; /* Couleur d'accent principal (bleu électrique) */
  --color-accent-hover: #5395ff; /* Accent au survol (bleu plus clair) */
  --color-accent-green: #4caf7d; /* Accent alternatif pour les statuts complets */
  --color-header: #f0f2f5; /* Couleur spéciale pour h1/h2 */

  /* ─ ESPACEMENT : Système basé sur 8px ───────────────────────── */
  --spacing-unit: 8px; /* Unité de base (8px) */
  --spacing-xs: calc(var(--spacing-unit) * 0.5); /* 4px : très petit écart */
  --spacing-sm: calc(var(--spacing-unit) * 1); /* 8px : petit écart */
  --spacing-md: calc(var(--spacing-unit) * 2); /* 16px : écart moyen */
  --spacing-lg: calc(var(--spacing-unit) * 3); /* 24px : grand écart */
  --spacing-xl: calc(var(--spacing-unit) * 4); /* 32px : très grand écart */
  --spacing-xxl: calc(var(--spacing-unit) * 5); /* 40px : écart maximal */

  /* ─ BORDURES ET OMBRES ──────────────────────────────────────── */
  --border-radius: 4px; /* Petit arrondi (boutons, tags) */
  --border-radius-lg: 8px; /* Grand arrondi (images, cartes) */
  --box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); /* Ombre forte (élévation) */
  --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); /* Ombre légère (subtile) */
  --border: 1px solid var(--color-border); /* Ligne standard */

  /* ─ ANIMATIONS ────────────────────────────────────────────────── */
  --transition: 0.2s ease; /* Transition rapide (interactivité) */
  --transition-slow: 0.35s ease; /* Transition lente (effet) */
}