/* ==========================================================================
   VARIABLES – Design tokens extraits de la maquette « Capvest-wireframe v4 »
   Toutes les valeurs proviennent de la planche design system (page 1 du PDF)
   sauf mention [hypothèse] : valeur déduite visuellement, à valider.
   ========================================================================== */

:root {
  /* Colors — palette de la maquette */
  --color-primary: #153F25;          /* vert forêt : titres, bandes, boutons */
  --color-secondary: #C3AD8F;        /* sable : accents, H3, icônes, boutons */
  --color-accent: #C3AD8F;           /* alias de secondary (palette à 5 couleurs) */
  --color-text: #000000;             /* texte courant (palette) */
  --color-text-muted: #6F6F6A;       /* [hypothèse] légendes, textes secondaires */
  --color-background: #FFFFFF;
  --color-surface: #F7F4EF;          /* crème : sections formulaire, cartes */
  --color-border: #E7E1D6;           /* [hypothèse] bordures de champs, séparateurs */
  --color-on-primary: #FFFFFF;       /* texte sur fond vert */

  /* Typography — Outfit est la seule famille de la maquette */
  --font-heading: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

  /* Font weights (déclinaisons utilisées par la maquette) */
  --weight-xlight: 200;   /* H5 chiffres clés */
  --weight-light: 300;    /* paragraphes */
  --weight-medium: 500;   /* menu, chapeau, H6 */
  --weight-semibold: 600; /* H1–H4 */

  /* Font sizes — fluides : mini mobile → valeur exacte maquette à 1440px.
     Texte courant jamais sous 16px sur mobile. */
  --font-size-xs: 0.875rem;                                /* 14px : mentions footer */
  --font-size-sm: clamp(1rem, 0.93rem + 0.28vw, 1.125rem); /* 16→18px : légendes */
  --font-size-base: clamp(1.0625rem, 0.96rem + 0.42vw, 1.25rem); /* 17→20px : P, H4, H6, menu */
  --font-size-lg: clamp(1.25rem, 1.16rem + 0.42vw, 1.4375rem);   /* 20→23px : H3, chapeau */
  --font-size-xl: clamp(1.75rem, 1.44rem + 1.53vw, 2.1875rem);   /* 28→35px : H2 */
  --font-size-2xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.375rem);    /* 36→54px : H1, H5 chiffres */

  /* Line heights (ratios exacts de la maquette) */
  --leading-h1: 1.02;     /* 54/55 */
  --leading-h2: 1;        /* 35/35 */
  --leading-h3: 1.3;      /* 23/30 */
  --leading-body: 1.4;    /* 20/28 */
  --leading-stat: 1.39;   /* 54/75 */

  /* Letter spacing — interlettrage maquette exprimé en millièmes d'em
     (convention Figma/Adobe) : 10 → 0.01em. [hypothèse sur l'unité] */
  --tracking-h2: 0.01em;
  --tracking-h3: 0.04em;
  --tracking-base: 0.02em;
  --tracking-stat: -0.02em;

  /* Spacing — échelle déduite des espacements maquette
     (50px sous H2 et 20px sous H3 sont explicites) */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px : gouttières galerie */
  --space-md: 2rem;      /* 32px */
  --space-lg: 3.125rem;  /* 50px : espace sous H2 */
  --space-xl: 5rem;      /* 80px */
  --space-section: clamp(4rem, 2.5rem + 5vw, 7.5rem); /* 64→120px [hypothèse] : padding vertical des sections */

  /* Layout — marges latérales fluides : 18px mobile → 90px dès 1440px.
     Au-delà de 1580px d'écran, le contenu plafonne à 1400px centrés
     (compromis validé : ni contraint à 1080px, ni pleine largeur). */
  --container-width: 1400px;
  --container-padding: clamp(1.125rem, 6.25vw, 5.625rem); /* 6.25vw = 90px à 1440 */
  /* Marge extérieure réelle du contenu : le padding tant que le plafond de
     1400px n'est pas atteint, puis l'espace résiduel de part et d'autre. */
  --margin-outer: max(var(--container-padding), (100vw - var(--container-width)) / 2);
  /* Décalage gauche du bandeau header : 0 jusqu'à 1440px, puis croissance
     fluide (0.5px par px d'écran) plafonnée à 75% de la marge extérieure
     — aucun saut au passage du seuil. */
  --header-offset: max(0px, min((100vw - 1440px) * 0.5, var(--margin-outer) * 0.75));
  --header-height: 100px; /* spécifié sur la planche design system */

  /* UI */
  --border-radius-sm: 4px;    /* champs de formulaire [hypothèse] */
  --border-radius-md: 12px;
  --border-radius-lg: 80px;   /* arrondi bas-gauche du header (courbe maquette) */
  --border-radius-pill: 999px; /* boutons */
  --shadow-soft: 0 2px 14px rgba(21, 63, 37, 0.06); /* [hypothèse] champs sur fond crème */
  --transition-default: 200ms ease;
}