/* =========================================================
   DO TRAININGS — Tokens de design
   Source de vérité : Design Document V1 · 2026
   ========================================================= */

:root {
  /* ---------- Palette ---------- */
  --color-green: #8CA37D;
  --color-green-deep: #333F2B;
  --color-green-soft: #C6D2BA;
  --color-brown: #6E5C48;
  --color-bg: #F4EEE3;
  --color-sand: #E8DDCB;
  --color-surface: #FBF8F1;
  --color-ink: #211D17;

  /* Neutres dérivés du design document */
  --color-ink-soft: #6B6357;   /* textes secondaires */
  --color-ink-muted: #9C9484;  /* métadonnées, états désactivés */
  --color-border: #DCD1BE;     /* bordures de cartes et champs */
  --color-border-light: rgba(255, 255, 255, 0.13); /* séparateurs sur fond vert */
  --color-white: #FFFFFF;

  /* États */
  --color-focus: var(--color-green);
  --color-error: #A6412F;
  --color-error-bg: #F7E7E3;

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

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Échelle fluide : mobile 320px → desktop 1440px */
  --text-display: clamp(2.25rem, 1.55rem + 3.5vw, 3.5rem);   /* 36 → 56 */
  --text-h1: clamp(1.875rem, 1.45rem + 2.1vw, 2.5rem);       /* 30 → 40 */
  --text-h2: clamp(1.5rem, 1.32rem + 0.9vw, 1.75rem);        /* 24 → 28 */
  --text-h3: 1.25rem;                                         /* 20 */
  --text-body: 1rem;                                          /* 16 */
  --text-small: 0.875rem;                                     /* 14 */
  --text-label: 0.75rem;                                      /* 12 */
  --text-micro: 0.6875rem;                                    /* 11 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-label: 0.125em;  /* +2 du design document */
  --tracking-button: 0.0625em;
  --tracking-kicker: 0.1875em;

  /* ---------- Espacements ---------- */
  --space-3xs: 0.25rem;   /*  4 */
  --space-2xs: 0.5rem;    /*  8 */
  --space-xs: 0.75rem;    /* 12 */
  --space-sm: 1rem;       /* 16 */
  --space-md: 1.5rem;     /* 24 */
  --space-lg: 2rem;       /* 32 */
  --space-xl: 3rem;       /* 48 */
  --space-2xl: 4rem;      /* 64 */
  --space-3xl: 6rem;      /* 96 */

  /* Rythme vertical des sections : plus serré sur mobile */
  --section-gap: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* ---------- Mise en page ---------- */
  --container-max: 1260px;
  --container-narrow: 720px;
  --gutter: max(1rem, env(safe-area-inset-left));
  --gutter-right: max(1rem, env(safe-area-inset-right));

  /* ---------- Rayons ---------- */
  --radius-sm: 0.625rem;  /* 10 — champs */
  --radius-md: 1.125rem;  /* 18 — cartes */
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 2px rgba(33, 29, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(33, 29, 23, 0.08);
  --shadow-lifted: 0 -4px 20px rgba(33, 29, 23, 0.10);

  /* ---------- Cibles tactiles ---------- */
  --tap-target: 44px;

  /* ---------- Mouvement ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

  /* ---------- Couches ---------- */
  --z-sticky-header: 100;
  --z-mobile-cta: 200;
  --z-menu: 300;
}

/* Sur desktop, la gouttière s'élargit */
@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
    --gutter-right: 2.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 3.75rem;
    --gutter-right: 3.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}