/* ============================================================
   Stephane ASTRO · TOKENS CANONIQUES v94.5.0
   ============================================================
   Source unique de vérité pour l'échelle typographique, l'échelle
   d'espacement, les rayons, ombres, durées, et les breakpoints.

   Ce fichier N'ÉCRASE PAS les tokens existants (--r-*, --ds-*,
   --c36-*, --lx-*, legacy --cream/--bg-*/--fg-*). Il AJOUTE une
   couche canonique --r-* qui unifie les futurs composants.

   Étapes suivantes du chantier §2 (à faire progressivement) :
     • Étape 2 : refactorer chaque composant vers les nouveaux
       tokens (--r-text-*, --r-space-*, --r-radius-*).
     • Étape 3 : supprimer les nomenclatures redondantes
       (--ds-*, --c36-*, legacy) une fois que plus rien ne les
       référence.
     • Étape 4 : consolider les 8 breakpoints en 3.

   Voir DESIGN-TOKENS.md pour le plan de migration.
   ============================================================ */

:root {

  /* ============================================================
     TYPOGRAPHIE · Échelle modulaire, base 16px, ratio 1.25
     ============================================================
     Ces tokens remplacent les 29 font-sizes uniques utilisées
     aujourd'hui sur la home. Tout nouveau composant DOIT
     utiliser l'un de ces 8 tokens et rien d'autre.
     ============================================================ */
  --r-text-xs:   0.75rem;    /* 12px  — meta, disclaimers, tables denses */
  --r-text-sm:   0.875rem;   /* 14px  — labels, corps small, légendes */
  --r-text-md:   1rem;       /* 16px  — corps par défaut (plancher lisibilité mobile) */
  --r-text-lg:   1.125rem;   /* 18px  — corps large, sous-titres discrets */
  --r-text-xl:   clamp(1.25rem, 1.5vw, 1.5rem);     /* 20 → 24px — H4, titres de carte */
  --r-text-2xl:  clamp(1.75rem, 2.5vw, 2.25rem);    /* 28 → 36px — H3, titres de section */
  --r-text-3xl:  clamp(2.5rem, 4vw, 3.5rem);        /* 40 → 56px — H2, sections majeures */
  --r-text-hero: clamp(3rem, 6.5vw, 5.5rem);        /* 48 → 88px — H1 hero */

  /* ============================================================
     TYPOGRAPHIE · Interlignage
     ============================================================ */
  --r-lh-tight:   1.05;   /* Titres macro (hero, H1) */
  --r-lh-snug:    1.2;    /* H2, H3 */
  --r-lh-normal:  1.5;    /* Corps par défaut */
  --r-lh-relaxed: 1.65;   /* Longs paragraphes (articles, PDF) */

  /* ============================================================
     TYPOGRAPHIE · Familles (aliases explicites)
     ============================================================
     Les tokens --r-serif, --r-sans, --r-mono, --r-macro sont
     définis dans refonte-v92.5.css. Ils restent la référence.
     ============================================================ */

  /* ============================================================
     ESPACEMENT · Échelle base 4px
     ============================================================
     Toutes les marges, paddings, gaps doivent utiliser ces
     tokens et rien d'autre. Fini les 12px, 22px, 26px sortis
     de nulle part.
     ============================================================ */
  --r-space-0:   0;
  --r-space-1:   4px;
  --r-space-2:   8px;
  --r-space-3:   12px;
  --r-space-4:   16px;
  --r-space-5:   24px;
  --r-space-6:   32px;
  --r-space-7:   48px;
  --r-space-8:   64px;
  --r-space-9:   96px;
  --r-space-10:  128px;

  /* Gutter contextuel (marges latérales de section) reste déjà
     défini dans refonte-v92.5.css : var(--r-gutter). */

  /* ============================================================
     RAYONS
     ============================================================
     Le site est majoritairement en carrés (border-radius: 0)
     par doctrine v5. Ces rayons sont pour les rares exceptions.
     ============================================================ */
  --r-radius-0:    0;
  --r-radius-sm:   4px;
  --r-radius-md:   8px;
  --r-radius-lg:   12px;
  --r-radius-full: 9999px;   /* Avatars, badges circulaires */

  /* ============================================================
     OMBRES
     ============================================================
     Palette d'ombres pour surfaces élevées. Les variantes light
     (thème clair) sont déclarées dans refonte-v92.5.css sous
     html[data-theme="light"].
     ============================================================ */
  --r-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --r-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.14);
  --r-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.22);
  --r-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.30);

  /* ============================================================
     DURÉES · Alias explicites (les tokens vivent déjà en base)
     ============================================================ */
  --r-dur-slow: 640ms;      /* transitions longues (reveal, hero) */
  /* --r-dur-fast (180ms) et --r-dur-med (360ms) déjà définis dans refonte-v92.5.css */

  /* ============================================================
     Z-INDEX · Ordre canonique
     ============================================================
     Fini les 9998, 9000, 100 sortis de nulle part.
     ============================================================ */
  --r-z-base:      1;
  --r-z-raised:    10;
  --r-z-sticky:    50;    /* Nav sticky, sticky-cta */
  --r-z-overlay:   100;   /* Modals, veils */
  --r-z-cookie:    200;   /* Cookie banner (par-dessus tout) */
  --r-z-toast:    500;    /* Notifications */
}

/* ============================================================
   BREAKPOINTS CANONIQUES v94.5.0
   ============================================================
   Le site utilise aujourd'hui 8 breakpoints hétérogènes
   (480, 560, 720, 768, 860, 900, 1024, 1101, 1200). Ces
   valeurs restent en legacy dans les CSS existants.

   Tout NOUVEAU code doit utiliser exclusivement ces trois
   breakpoints, mobile-first :

     @media (min-width: 48rem)  { ... }   // 768px  — tablet+
     @media (min-width: 64rem)  { ... }   // 1024px — desktop+
     @media (min-width: 80rem)  { ... }   // 1280px — wide+

   Toute exception (landscape, print) doit être documentée par
   un commentaire au-dessus de la media query.
   ============================================================ */