:root {
  /* Couleurs de marque */
  --color-bleu-nuit: #1B3A4B;        /* Ancre, engagement — titres, textes principaux */
  --color-ciel-clair: #87C4CC;       /* Clarté, accents — CTA secondaires, highlights, soulignements */
  --color-ambre-chaleur: #F5B84A;    /* Humain, chaleureux — liens, icônes, éléments secondaires */
  --color-blanc-brume: #F0F4F5;      /* Fond principal, respiration */

  /* Couleurs fonctionnelles dérivées */
  --color-bleu-mutuale: #1B3A4B;     /* Alias pour compat */
  --color-cta-primary: var(--color-bleu-nuit);
  --color-cta-primary-hover: #2A5468;
  --color-cta-secondary-bg: var(--color-ciel-clair);
  --color-cta-secondary-bg-hover: #6FB0BA;

  /* Neutres */
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFB;
  --color-gray-100: #EEF2F4;
  --color-gray-200: #DCE3E7;
  --color-gray-400: #8FA1AB;
  --color-gray-600: #56676F;
  --color-gray-800: #2D3A41;

  /* Sémantique */
  --color-success: #2D9468;
  --color-warning: #E89B2C;
  --color-error: #C8453A;
  --color-info: var(--color-ciel-clair);

  /* Familles — Cal Sans pour l'ensemble du site */
  --font-display: "Cal Sans", system-ui, sans-serif;
  --font-body: "Cal Sans", system-ui, sans-serif;

  /* Échelle modulaire — ratio 1.25 (major third), base 16px */
  --fs-xs: 0.75rem;     /* 12 — captions, tags */
  --fs-sm: 0.875rem;    /* 14 — meta, légendes */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md: 1.125rem;    /* 18 — body large, lead */
  --fs-lg: 1.5rem;      /* 24 — H4, sous-titres section */
  --fs-xl: 2rem;        /* 32 — H3 */
  --fs-2xl: 2.75rem;    /* 44 — H2 */
  --fs-3xl: 3.75rem;    /* 60 — H1 hero desktop */
  --fs-3xl-mobile: 2.25rem; /* 36 — H1 hero mobile */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;     /* titres */
  --lh-snug: 1.3;       /* sous-titres */
  --lh-normal: 1.55;    /* body */
  --lh-relaxed: 1.7;    /* paragraphes longs */

  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 — espace inter-sections desktop */

  /* Espacements inter-sections — harmonisés */
  --section-padding-y-mobile: 3rem;              /* 48px */
  --section-padding-y-desktop: 4rem;             /* 64px — donne 128px entre deux sections */

  --radius-sm: 6px;     /* badges, tags */
  --radius-md: 12px;    /* boutons, inputs */
  --radius-lg: 20px;    /* cartes */
  --radius-xl: 32px;    /* sections en bloc */
  --radius-2xl: 40px;
  --radius-3xl: 48px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(27, 58, 75, 0.06);
  --shadow-md: 0 4px 12px rgba(27, 58, 75, 0.08);
  --shadow-lg: 0 12px 32px rgba(27, 58, 75, 0.12);
  --shadow-card-hover: 0 16px 40px rgba(27, 58, 75, 0.16);
}