/* ==========================================================================
   Vocation & Talents — Design tokens
   Toutes les couleurs, typographies, espacements et rayons du site.
   Modifier ce fichier suffit pour changer l'identité visuelle globale.
   Palette extraite de la référence graphique fournie (dégradé bleu → vert).
   ========================================================================== */

:root {
  /* --- Marque ------------------------------------------------------------ */
  --c-blue: #0f8dbf;        /* bleu de référence (haut-gauche du dégradé)   */
  --c-blue-deep: #056b93;
  --c-teal: #189a9a;        /* teal intermédiaire                            */
  --c-moss: #489e88;        /* vert bleuté                                   */
  --c-leaf: #7cb356;        /* vert feuille                                  */
  --c-lime: #9dc557;        /* lime de référence (bas-droit du dégradé)      */
  --c-lime-soft: #c3d98a;

  /* --- Encres & fonds ---------------------------------------------------- */
  --c-ink: #062733;         /* texte principal, fonds sombres                */
  --c-ink-2: #0a3a49;
  --c-ink-3: #12505f;
  --c-body: #33525d;        /* texte courant                                 */
  --c-muted: #526b75;       /* texte secondaire, contraste AA sur fond clair */
  --c-paper: #f7f8f4;       /* fond principal (blanc chaud)                  */
  --c-paper-2: #eef2ea;     /* surfaces alternées                            */
  --c-paper-3: #e4ebe0;
  --c-white: #ffffff;

  /* --- Trait & états ----------------------------------------------------- */
  --c-line: rgba(6, 39, 51, 0.14);
  --c-line-soft: rgba(6, 39, 51, 0.08);
  --c-line-invert: rgba(255, 255, 255, 0.18);
  --c-focus: #0b6e8c;
  --c-error: #a3282b;
  --c-success: #2f6b46;

  /* --- Dégradés ---------------------------------------------------------- */
  --grad-brand: linear-gradient(128deg,
      var(--c-blue) 0%,
      var(--c-teal) 34%,
      var(--c-moss) 62%,
      var(--c-lime) 100%);
  --grad-brand-soft: linear-gradient(128deg,
      rgba(15, 141, 191, 0.14) 0%,
      rgba(72, 158, 136, 0.12) 55%,
      rgba(157, 197, 87, 0.16) 100%);
  --grad-text: linear-gradient(96deg, #0b6c88 0%, #2c8a72 55%, #6f9a2e 100%);
  --grad-deep: linear-gradient(126deg, #052a37 0%, #0a4a55 52%, #355e2f 100%);

  /* --- Typographie ------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;                                  /* 12 px */
  --fs-sm: 0.8125rem;                                /* 13 px */
  --fs-base: 1.0625rem;                              /* 17 px */
  --fs-md: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.62vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --fs-2xl: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --fs-3xl: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);
  --fs-4xl: clamp(3rem, 1.5rem + 6.2vw, 6.5rem);
  --fs-5xl: clamp(3.5rem, 1.2rem + 9vw, 8.5rem);

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.68;
  --tracking-wide: 0.16em;
  --tracking-wider: 0.24em;

  /* --- Espacements (base 4 px) ------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;
  --sp-13: 10rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --measure-wide: 78ch;
  --container: 78rem;      /* 1248 px */
  --container-wide: 90rem;

  /* --- Rayons, ombres, mouvement ---------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 39, 51, 0.06);
  --shadow-md: 0 18px 40px -24px rgba(6, 39, 51, 0.35);
  --shadow-lg: 0 40px 90px -50px rgba(6, 39, 51, 0.55);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --dur-4: 900ms;

  --header-h: 78px;
  --z-header: 300;
  --z-menu: 200;
  --z-veil: 900;
  --z-cursor: 950;
}