:root {
  /* Couleurs dérivées de la bâche officielle GS. */
  --color-ink: #0f4867;
  --color-ink-2: #1B5A7A;
  --color-ink-3: #2A6E8E;
  --color-stone-1: #ECEEF1;
  --color-stone-2: #C8CCD4;
  --color-stone-3: #6E7787;
  --color-stone-4: #2A3242;
  --color-accent: #E97524;
  --color-accent-deep: #C95F1B;
  --color-accent-soft: #FBDCC1;
  --color-accent-warm: #F8C9A0;
  --color-paper: #FFFFFF;
  --color-line: #DDE1E6;
  --color-success: #2BA664;       /* vert des checks sur la bâche WIP */
  --color-success-soft: #E6F4EC;

  /* Bleu pâle décoratif (gradient bâche) */
  --color-mist-1: #A3C0D6;
  --color-mist-2: #B6CFE0;

  /* Typographies. IBM Plex Sans + Mono. */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  /* Serif éditoriale, réservée aux numéros de phase de la timeline (touche déco bâche). */
  --font-serif: "Bodoni Moda", "Bodoni 72", "Didot", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Échelle typographique fluide */
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.21vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.59vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.93vw, 2.28rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.42vw, 2.89rem);
  --step-5:  clamp(2.49rem, 2.07rem + 2.11vw, 3.66rem);
  --step-6:  clamp(2.99rem, 2.36rem + 3.07vw, 4.63rem);
  --step-7:  clamp(3.58rem, 2.66rem + 4.50vw, 5.79rem);

  /* Espacements base 8 */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* Rayons révisés : la bâche utilise des cards arrondies (~20px) et beaucoup de pills.
     Les sections de contenu (timeline, listes) restent anguleuses. */
  --radius-0: 0;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Dégradés inspirés de la bâche WIP.
     Deux blooms diffus (bleu pâle + orange pêche) sur fond blanc,
     reproduisant l'effet aquarelle de la bâche.
  */
  --gradient-page:
    radial-gradient(ellipse 95% 75% at 0% 0%, var(--color-mist-1) 0%, transparent 72%),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--color-accent-soft) 0%, transparent 65%),
    var(--color-paper);

  --gradient-page-alt:
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--color-accent-soft) 0%, transparent 65%),
    radial-gradient(ellipse 95% 75% at 0% 100%, var(--color-mist-1) 0%, transparent 72%),
    var(--color-paper);

  --gradient-page-soft:
    radial-gradient(ellipse 75% 55% at 0% 0%, var(--color-mist-2) 0%, transparent 75%),
    radial-gradient(ellipse 75% 55% at 100% 100%, var(--color-accent-soft) 0%, transparent 70%),
    var(--color-paper);

  --gradient-warm:
    radial-gradient(ellipse 90% 70% at 100% 50%, var(--color-accent-warm) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 0%, var(--color-accent-soft) 0%, transparent 70%),
    var(--color-paper);

  --gradient-ink:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(233, 117, 36, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(233, 117, 36, 0.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);

  /* Ombres subtiles */
  --shadow-1: 0 1px 2px rgba(14, 31, 51, 0.04);
  --shadow-2: 0 4px 16px rgba(14, 31, 51, 0.06);
  --shadow-3: 0 16px 40px rgba(14, 31, 51, 0.08);

  /* Breakpoints (pour référence) */
  --bp-md: 720px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Layout */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --header-h: 116px;

  /* Transitions discrètes */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-med: 240ms;
}