/* ═══════════════════════════════════════════════════════════════════════
   VINGT MILLE — Design tokens (source de vérité unique)
   Direction artistique « Lagon » · thème clair · accessible 7–77 ans
   ───────────────────────────────────────────────────────────────────────
   Ce fichier est LA référence. Toute interface (landing, application,
   e-mails, documents) dérive ses valeurs d'ici. Version machine-readable :
   design-system/tokens.json. Documentation : design-system/index.html.

   Règles d'or :
   · Le texte courant utilise --vm-encre ou --vm-encre-soft, jamais lagon-500.
   · Les liens et textes colorés utilisent lagon-700 (AA sur écume/sable).
   · Sur fond corail-500, le texte est corail-ink (jamais blanc).
   · Ne jamais introduire de couleur hors palette.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs · primitives ─────────────────────────────────────────── */
  /* Fonds clairs (la plage) */
  --vm-ecume:        #FBF7F0;  /* fond de page principal */
  --vm-sable:        #F3EBDD;  /* fond alterné, surfaces posées */
  --vm-blanc:        #FFFFFF;  /* cartes sur fond sable, inputs */

  /* L'eau (du bord vers le large) */
  --vm-eau-050:      #EEF8F9;
  --vm-eau-100:      #DCF1F4;
  --vm-eau-200:      #B8E3E9;
  --vm-lagon-300:    #6FCBD4;
  --vm-lagon-500:    #0FA3B1;  /* couleur d'identité — décor, jamais texte courant */
  --vm-lagon-700:    #0A6973;  /* liens, texte coloré (AA ≥ 4,5:1 sur écume) */
  --vm-lagon-900:    #07444C;

  /* Le corail (chaleur, action) */
  --vm-corail-100:   #FFE5DF;
  --vm-corail-300:   #FFA493;
  --vm-corail-500:   #FF7059;  /* CTA, accents */
  --vm-corail-700:   #C2492F;
  --vm-corail-ink:   #47140A;  /* texte sur fond corail-500 (≈ 7,3:1) */

  /* Le soleil (joie, mise en avant) */
  --vm-soleil-100:   #FFF3D6;
  --vm-soleil-400:   #FFD166;
  --vm-soleil-ink:   #4A3508;  /* texte sur fond soleil-400 */

  /* L'encre (texte) */
  --vm-encre:        #0B3C49;  /* texte principal (≈ 10,9:1 sur écume) */
  --vm-encre-soft:   #41626D;  /* texte secondaire (≈ 5,9:1 sur écume) */
  --vm-encre-faint:  #6E8893;  /* placeholders, légendes (grands corps seulement) */

  /* États sémantiques */
  --vm-ok-bg:        #E3F4E8;
  --vm-ok-ink:       #1B5E33;
  --vm-alerte-bg:    #FFF3D6;
  --vm-alerte-ink:   #7A5708;
  --vm-erreur-bg:    #FBE5E0;
  --vm-erreur-ink:   #9B2C16;

  /* ── Couleurs · rôles sémantiques ──────────────────────────────────── */
  --vm-bg:           var(--vm-ecume);
  --vm-bg-alt:       var(--vm-sable);
  --vm-surface:      var(--vm-blanc);
  --vm-text:         var(--vm-encre);
  --vm-text-soft:    var(--vm-encre-soft);
  --vm-primary:      var(--vm-lagon-500);
  --vm-link:         var(--vm-lagon-700);
  --vm-cta:          var(--vm-corail-500);
  --vm-cta-ink:      var(--vm-corail-ink);
  --vm-focus:        var(--vm-lagon-700);
  --vm-border:       #E4D9C6;            /* traits sur fonds clairs */
  --vm-border-soft:  #EFE7D8;

  /* ── Typographie ───────────────────────────────────────────────────── */
  /* Webfonts en progressive enhancement : les fallbacks font partie du contrat. */
  --vm-font-display: "Young Serif", "Georgia", "Times New Roman", serif;
  --vm-font-body:    "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --vm-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle fluide (mobile → desktop) */
  --vm-text-xs:      0.8125rem;                          /* 13px — légendes */
  --vm-text-s:       0.9375rem;                          /* 15px — texte dense */
  --vm-text-m:       1.0625rem;                          /* 17px — corps (lisibilité 7–77) */
  --vm-text-l:       1.25rem;                            /* 20px — intro, lede */
  --vm-text-xl:      clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);   /* h3 */
  --vm-text-2xl:     clamp(1.75rem, 1.3rem + 2.2vw, 2.625rem);   /* h2 */
  --vm-text-3xl:     clamp(2.375rem, 1.6rem + 3.8vw, 4rem);      /* h1/hero */

  --vm-leading-tight: 1.12;   /* titres display */
  --vm-leading-base:  1.65;   /* corps */
  --vm-weight-regular: 400;
  --vm-weight-semibold: 600;
  --vm-weight-bold:   700;

  /* ── Espacements (base 4px) ────────────────────────────────────────── */
  --vm-space-1:  0.25rem;   /*  4px */
  --vm-space-2:  0.5rem;    /*  8px */
  --vm-space-3:  0.75rem;   /* 12px */
  --vm-space-4:  1rem;      /* 16px */
  --vm-space-5:  1.5rem;    /* 24px */
  --vm-space-6:  2rem;      /* 32px */
  --vm-space-7:  3rem;      /* 48px */
  --vm-space-8:  4rem;      /* 64px */
  --vm-space-9:  6rem;      /* 96px */
  --vm-space-10: 8rem;      /* 128px */

  /* ── Rayons (coins très arrondis = signature Lagon) ────────────────── */
  --vm-radius-s:    10px;   /* champs, badges */
  --vm-radius-m:    16px;   /* boutons, alertes */
  --vm-radius-l:    24px;   /* cartes */
  --vm-radius-xl:   36px;   /* sections, héros */
  --vm-radius-full: 999px;  /* pilules, bulles */

  /* ── Ombres (chaudes, jamais grises) ───────────────────────────────── */
  --vm-shadow-s:  0 1px 3px rgba(11, 60, 73, 0.08);
  --vm-shadow-m:  0 6px 20px rgba(11, 60, 73, 0.10);
  --vm-shadow-l:  0 18px 44px rgba(11, 60, 73, 0.14);
  --vm-ring:      0 0 0 3px rgba(15, 163, 177, 0.35);   /* focus visible */

  /* ── Mouvement ─────────────────────────────────────────────────────── */
  --vm-ease:        cubic-bezier(0.33, 1, 0.68, 1);      /* easeOutCubic — « glisse d'eau » */
  --vm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* micro-interactions */
  --vm-dur-fast:    160ms;
  --vm-dur-base:    280ms;
  --vm-dur-slow:    600ms;

  /* ── Mise en page ──────────────────────────────────────────────────── */
  --vm-container:    72rem;     /* 1152px */
  --vm-container-text: 46rem;   /* largeur de lecture confortable */
  --vm-gutter:       clamp(1.25rem, 4vw, 2.5rem);

  /* Breakpoints (référence — à utiliser tels quels dans les media queries) :
     ≥ 30rem  (480px)  : portrait large
     ≥ 48rem  (768px)  : tablette
     ≥ 64rem  (1024px) : desktop
     ≥ 80rem  (1280px) : large */
}

/* ── Réduction de mouvement : contrat global, non négociable ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}