/* ============================================================
   KCP — Design Tokens
   Source de vérité : couleurs, typographies, espacements, ombres
   ============================================================ */

:root {
  /* ─── Couleurs ─── */
  --color-bleu-nuit: #17294B;
  --color-bleu-nuit-90: rgba(23, 41, 75, 0.9);
  --color-or-cuivre: #B8860B;
  --color-or-cuivre-dark: #9a720a;
  --color-blanc: #FFFFFF;
  --color-gris-soutien: #8C9BAA;
  --color-gris-tres-leger: #F8F9FA;
  --color-gris-clair: #F0F2F5;
  --color-bleu-clair-bg: #EEF2F8;

  /* ─── Typographies ─── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─── Échelle typographique ─── */
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 22px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-label: 12px;
  --fs-counter: 64px;

  /* ─── Espacements ─── */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-padding: 24px;
  --radius-institutional: 2px;
  --radius-pill: 999px;

  /* ─── Ombres ─── */
  --shadow-card: 0 2px 20px rgba(23, 41, 75, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(23, 41, 75, 0.12);
  --shadow-navbar: 0 2px 12px rgba(23, 41, 75, 0.08);

  /* ─── Transitions ─── */
  --transition-base: 0.3s ease;
  --transition-fast: 0.2s ease;

  /* ─── Z-index ─── */
  --z-navbar: 1000;
  --z-tooltip: 1100;
  --z-modal: 1200;
}

/* ─── Responsive : ajustements mobile ─── */
@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-counter: 48px;
    --container-padding: 20px;
  }
}