/* ===== Design tokens — MSR Environnement =====
   Editorial / refined-institutional system.
   Brand palette is fixed by the brief (no substitutions); the editorial
   character comes from typography, rhythm and hairline detailing. */

/* ---- Self-hosted typefaces (offline-safe) ---- */
/* Spectral — display serif, designed by Production Type (Paris). Institutional,
   screen-optimised, distinctive. Inter — clean body sans for RGAA legibility. */
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/spectral-400.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/spectral-500.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/spectral-600.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/spectral-700.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/spectral-800.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-700.woff2") format("woff2"); }

:root {
  /* ---- Brand palette (from brief — no substitutions) ---- */
  --navy:    #143A6B;   /* main headings, logotype, primary brand */
  --green:   #2E9E4F;   /* CTA / eco accent — used sparingly */
  --blue:    #2E6BB5;   /* sub-headings, links, secondary accents */
  --grey:    #EEF1F4;   /* card / section backgrounds */
  --white:   #FFFFFF;   /* main background */
  --ink:     #1F2933;   /* body text */

  /* ---- Derived / supporting ---- */
  --navy-900: #0E2A50;
  --navy-800: #102F58;
  --green-600: #26833F;
  --green-050: #EAF4EE;
  --blue-050: #EEF4FB;
  --blue-100: #E1ECF8;

  /* Editorial neutrals — a hair of warmth so white doesn't read clinical */
  --paper:    #FBFAF8;   /* faint off-white for alternating bands */
  --line:      #E4E9F0;  /* hairline rules / borders */
  --line-strong: #CFD8E4;
  --ink-70:   #414B57;
  --ink-55:   #5C6673;
  --ink-40:   #8A94A1;
  --focus:    #2E6BB5;

  /* SoliZé sub-brand (solar accent, used only in that section) */
  --solar:     #F4B740;
  --solar-100: #FFE7A8;

  /* ---- Typography ---- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale — editorial, generous top end */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.78vw, 2.05rem);
  --step-3:  clamp(1.90rem, 1.62rem + 1.35vw, 2.95rem);
  --step-4:  clamp(2.40rem, 1.95rem + 2.30vw, 4.10rem);
  --step-5:  clamp(3.00rem, 2.20rem + 4.10vw, 5.90rem);

  /* ---- Spacing scale ---- */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem;  --sp-8: 7rem;

  /* ---- Layout ---- */
  --container: 1220px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-y: clamp(5.5rem, 10vw, 9rem);

  /* Editorial detailing prefers restrained radii, not pill-everything */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);

  /* ---- Shadows — soft, sparing ---- */
  --shadow-sm:   0 1px 2px rgba(20,58,107,.05), 0 3px 10px rgba(20,58,107,.05);
  --shadow-card: 0 1px 2px rgba(20,58,107,.04), 0 14px 34px rgba(20,58,107,.08);
  --shadow-lift: 0 10px 24px rgba(20,58,107,.10), 0 30px 60px rgba(20,58,107,.14);
}