/* ============================================================================
   Platicadero v2 — tokens.css
   Source de vérité unique. Palette + type + rayons + mouvement extraits du
   design system de mindmarket.com (Inter 500, lime/charcoal/beige, rayons
   10/20/50, eases signature) déclinés pour un site participant grand public.
   Une seule direction, assumée : « Verde » (lime + beige + charcoal).
   ============================================================================ */

:root {
  /* -------- Primitives MindMarket (relevées sur mindmarket.com) -------- */
  --mm-green:        #8ED462;
  --mm-green-deep:   #368D32;
  --mm-green-deeper: #2A6F28;   /* texte blanc lisible (≥4.5:1) sur vert plein */
  --mm-beige:        #F5F1E4;
  --mm-beige-deep:   #E0DBCE;
  --mm-warm-white:   #FEFBF1;
  --mm-white:        #FFFFFF;
  --mm-charcoal:     #2C2E2A;
  --mm-yellow:       #F5E211;
  --mm-red:          #FF705D;
  --mm-red-deep:     #BF5622;
  --mm-blue:         #2BA0FF;
  --mm-blue-deep:    #2176BA;
  --mm-lila:         #EBC1FF;
  --mm-lila-deep:    #D8A3F1;

  /* -------- Sémantiques -------- */
  --ink:        var(--mm-charcoal);
  --ink-soft:   rgba(44, 46, 42, .76);
  --ink-faint:  rgba(44, 46, 42, .12);
  --page:       var(--mm-warm-white);
  --page-tint:  var(--mm-beige);

  --status-success: var(--mm-green-deeper);
  --status-error:   #A8401C;

  /* Variantes alpha des couleurs de marque : une seule définition par opacité,
     jamais de rgba() brut dans les composants. ink = charbon, paper = warm-white. */
  --ink-16:   rgba(44, 46, 42, .16);
  --ink-22:   rgba(44, 46, 42, .22);
  --ink-72:   rgba(44, 46, 42, .72);   /* placeholders : ≥ 4.5:1 sur blanc */
  --paper-14: rgba(254, 251, 241, .14);
  --paper-18: rgba(254, 251, 241, .18);
  --paper-55: rgba(254, 251, 241, .55);
  --paper-60: rgba(254, 251, 241, .6);
  --paper-66: rgba(254, 251, 241, .66);
  --paper-70: rgba(254, 251, 241, .7);
  --paper-72: rgba(254, 251, 241, .72);
  --white-08: rgba(255, 255, 255, .08);
  --white-16: rgba(255, 255, 255, .16);
  --white-18: rgba(255, 255, 255, .18);
  --white-24: rgba(255, 255, 255, .24);

  /* -------- Type (Inter variable, graisse 500 par défaut = signature MM) -------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-reg: 450; --fw-med: 500; --fw-semi: 560; --fw-bold: 640;

  /* Échelle display MindMarket : énorme, tracking très serré, interligne .95 */
  --fs-display: clamp(2.9rem, 0.9rem + 8.6vw, 8.75rem);
  --fs-h2:      clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem);
  --fs-h3:      clamp(1.55rem, 1.25rem + 1.3vw, 2.35rem);
  --fs-h4:      clamp(1.22rem, 1.1rem + .6vw, 1.55rem);
  --fs-lg:      clamp(1.14rem, 1.04rem + .45vw, 1.4rem);
  --fs-body:    clamp(1rem, .96rem + .22vw, 1.13rem);
  --fs-sm:      .9rem;

  --track-display: -0.055em;
  --track-head:    -0.04em;
  --track-body:    -0.02em;

  --lh-display: .95;
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;

  /* -------- Espacement (généreux, densité « galerie ») -------- */
  --sp-2xs: .5rem;  --sp-xs: .75rem; --sp-sm: 1rem; --sp-md: 1.5rem;
  --sp-lg: 2.5rem;  --sp-xl: 4rem;   --sp-2xl: 6.5rem;
  --sp-section: clamp(5.5rem, 3.5rem + 9vw, 10rem);

  /* -------- Rayons (règle unique : pilules interactives / cartes 20 / panneaux 50) */
  --r-sm:   10px;
  --r-md:   20px;
  --r-lg:   50px;   /* aussi : rayon des « rideaux » entre sections */
  --r-pill: 999px;

  /* -------- Profondeur (parcimonieux, ombres teintées charcoal) -------- */
  --shadow-card: 0 10px 30px rgba(44, 46, 42, .09);
  --shadow-pop:  0 22px 60px rgba(44, 46, 42, .17);

  /* -------- Mouvement (eases relevés sur mindmarket.com) --------
     --ease (in-out signature) : morphs et changements d'état à l'écran.
     --ease-out : entrées et feedback — démarre vite, l'œil regarde les
     premières frames ; c'est elle qui rend le site « réactif ». */
  --ease:        cubic-bezier(.5, 0, 0, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.17, .67, .3, 1.33);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 600ms;

  /* -------- Nav -------- */
  --nav-h: 4rem;
}

/* Laptops larges mais peu hauts (1366×768…) : display resserré,
   le CTA du héro reste au-dessus du pli. */
@media (min-width: 980px) and (max-height: 820px) {
  :root { --fs-display: clamp(2.9rem, .6rem + 6.4vw, 5.9rem); }
}