/* =========================================================================
   variables.css — Tokens du design system Hemogyn
   Valeurs reprises de l'audit du legacy (bulmaStyles.scss).
   Charger EN PREMIER : tous les autres fichiers CSS dépendent de ces tokens.
   ========================================================================= */

:root {

  /* --- Palette (cf. AUDIT.md §6) ---------------------------------------- */

  /* Violets (primaire) */
  --c-purple-darker:      #0b004f; /* fonds très sombres */
  --c-purple-darker-bis:  #292378; /* fond du footer */
  --c-purple-dark:        #1b0f7d; /* PRIMAIRE — titres, navbar active */
  --c-purple:             #504c9f; /* texte courant (paragraphes) */
  --c-purple-h2:          #3c4ac9; /* titres h2 des pages intérieures */
  --c-purple-light:       #dcdaff; /* fonds de blocs (sommaire, médias) */
  --c-purple-extra-light: #efeeff; /* fond de page global */
  --c-purple-deep:        #070043; /* liens dans encarts info/link */

  /* Corail (secondaire / liens / accents actu) */
  --c-coral:        #eb746d; /* SECONDAIRE — liens, boutons CTA */
  --c-coral-soft:   #fb8f89; /* datebox articles */

  /* Jaune (accent évènements) */
  --c-yellow:       #ffd057;

  /* Neutres */
  --c-white:        #ffffff;
  --c-bg-light:     #c6c6c6; /* fonds d'images placeholder, filtres */
  --c-grey-light:   #dcdcdc;

  /* Couleurs sémantiques des catégories d'actualités (cf. AUDIT.md §4) */
  --c-type-evenements:    #ffd057;
  --c-type-outils:        #908bec;
  --c-type-publications:  #ff8080;

  /* Rôles (alias sémantiques — préférer ceux-ci dans les composants) */
  --color-primary:    var(--c-purple-dark);
  --color-secondary:  var(--c-coral);
  --color-text:       var(--c-purple-dark);
  --color-heading:    var(--c-purple-dark);
  --color-link:       var(--c-coral);
  --color-link-hover: var(--c-coral-soft);
  --color-bg:         var(--c-purple-extra-light);

  /* --- Typographie ------------------------------------------------------ */

  --font-sans: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle (base 16px). Valeurs issues du legacy. */
  --fs-base:   1.125rem; /* 18px — corps de texte */
  --fs-sm:     1rem;     /* 16px */
  --fs-xs:     0.875rem; /* 14px */
  --fs-h2:     1.5rem;   /* 24px mobile ; 2rem desktop (cf. media query) */
  --fs-h1:     1.5rem;   /* 24px mobile ; 2.625rem desktop */
  --fs-display: 2.625rem;/* 42px — gros titres desktop */

  --fw-regular:   400;
  --fw-medium:    600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:  1.2;
  --lh-base:   1.5;

  /* --- Espacements ------------------------------------------------------ */

  --gutter:        4.5rem;  /* marge latérale navbar / sections (desktop) */
  --gutter-fluid:  5.18rem; /* container is-fluid du legacy */
  --space-section: 3rem;    /* padding vertical des sections */

  /* --- Rayons & ombres -------------------------------------------------- */

  --radius-sm:  6px;
  --radius-md:  10px;  /* navbar, boutons */
  --radius-lg:  20px;  /* cartes */
  --radius-pill: 30px; /* pastilles de filtres, nav prev/next */

  --shadow-card:  0 1px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 1px 24px 0 rgba(43, 32, 125, 0.25);

  /* --- Layout ----------------------------------------------------------- */

  --container-max: 1344px; /* widescreen Bulma ≈ 1344px */
  --header-height: 7.7rem; /* hauteur navbar + marge (legacy) */

  /* --- Breakpoints (pour mémo — utilisés dans les @media des composants)
     touch      : max-width 1023px
     desktop    : min-width 1024px
     widescreen : min-width 1216px
  ------------------------------------------------------------------------ */
}