/* ============================================================================
   TOKENS — Design system Crocs (reconstitution locale)
   Source de vérité unique pour couleurs, typo, espacements, rayons, ombres.
   Aucune valeur brute (#hex, px arbitraire) ne doit apparaître ailleurs
   que dans ce fichier. Voir docs/design-system.md.
   ========================================================================= */

:root {
  /* ---- Palette de marque -------------------------------------------------
     Valeurs relevées sur les feuilles de style du site de référence
     (okra.css / all.css). Deux points structurants :
     - les neutres sont CHAUDS (beige #f2f0eb, noir #2c282c), pas gris froids ;
     - le vert des boutons est un pastel (#9fd06e), le vert saturé étant
       réservé au logotype.                                                */
  --c-vert:            #9fd06e;   /* --color-background-button-primary */
  --c-vert-survol:     #bfdda0;   /* --color-background-button-primary-hover */
  --c-vert-logo:       #6abf4b;   /* vert saturé du logotype */
  --c-vert-fonce:      #4b7a2c;   /* texte vert lisible sur fond clair */
  --c-vert-clair:      #eef6e5;
  --c-jaune:           #f5e6a3;   /* tuiles pastel */
  --c-jaune-clair:     #fdf8e4;
  --c-bleu:            #006da4;   /* --color-primary-60 */
  --c-rouge:           #ad4616;   /* --color-orange-60, prix promotionnels */
  --c-rose:            #f3d5d8;   /* tuile pastel */

  /* Pastels des tuiles de collection, relevés sur la page d'accueil. */
  --c-pastel-peche:    #f0d9cd;
  --c-pastel-olive:    #e4e6b8;
  --c-pastel-ciel:     #d6e4ec;
  --c-pastel-menthe:   #d8e5d6;
  --c-pastel-lilas:    #ded8ea;
  --c-pastel-terre:    #c98a4b;

  /* ---- Neutres (chauds) -------------------------------------------------- */
  --c-noir:            #2c282c;   /* --color-primary-dark */
  --c-noir-profond:    #141215;   /* --color-base-100 */
  --c-gris-900:        #3a363a;
  --c-gris-700:        #5c5a58;   /* --color-blue-60n */
  --c-gris-500:        #80807c;   /* --color-blue-50n */
  --c-gris-300:        #cbcbc6;   /* --color-blue-20n */
  --c-gris-200:        #dddcd9;   /* --color-blue-10n */
  --c-gris-100:        #f2f0eb;   /* --color-primary-light, LE beige Crocs */
  --c-gris-50:         #f8f7f4;
  --c-blanc:           #ffffff;

  /* ---- Rôles sémantiques ------------------------------------------------ */
  --fond:              var(--c-blanc);
  --fond-alt:          var(--c-gris-100);
  --fond-inverse:      var(--c-noir);
  --texte:             var(--c-noir);
  --texte-doux:        var(--c-gris-700);
  --texte-faible:      var(--c-gris-500);
  --texte-inverse:     var(--c-blanc);
  --bordure:           var(--c-gris-300);
  --bordure-douce:     var(--c-gris-200);
  --focus:             #0b6ab8;

  /* ---- Typographie ------------------------------------------------------
     Le site de référence utilise « TT Crocs » (fonte propriétaire de la
     marque) avec « proxima_novaregular / extrabold » en second rang. Ces
     deux fontes sont sous licence : on ne les redistribue pas dans le
     prototype. On approche leur dessin, une grotesque humaniste aux formes
     ouvertes et légèrement arrondies, par Avenir Next (présente sur macOS)
     puis Nunito Sans, très proches de Proxima Nova en chasse et en axe.
     L'équipe de marque réintégrera TT Crocs au moment de la refonte.     */
  --police: "TT Crocs", "Proxima Nova", "Avenir Next", "Nunito Sans",
            -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --tx-2xs:   0.6875rem;  /* 11px — mentions légales, badges */
  --tx-xs:    0.75rem;    /* 12px — barre d'annonce, méta */
  --tx-sm:    0.875rem;   /* 14px — texte courant secondaire */
  --tx-base:  1rem;       /* 16px — texte courant */
  --tx-lg:    1.125rem;   /* 18px */
  --tx-xl:    1.375rem;   /* 22px — titres de carte */
  --tx-2xl:   1.75rem;    /* 28px — titres de section mobile */
  --tx-3xl:   2.25rem;    /* 36px — titres de section */
  --tx-4xl:   3rem;       /* 48px — titres de page */
  --tx-5xl:   4rem;       /* 64px — hero desktop */
  --tx-6xl:   5.5rem;     /* 88px — hero XL */

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-semi:    600;
  --graisse-grasse:  700;
  --graisse-extra:   800;
  --graisse-noire:   900;

  --interligne-serre:  1.05;
  --interligne-titre:  1.15;
  --interligne-normal: 1.5;
  --interligne-large:  1.7;

  --lettrage-serre:  -0.01em;
  --lettrage-normal: 0;
  --lettrage-large:  0.04em;
  --lettrage-xl:     0.12em;  /* sur-titres en capitales */

  /* ---- Espacements (échelle 4px) --------------------------------------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.25rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;
  --e-24: 6rem;
  --e-32: 8rem;

  /* Respiration verticale entre deux sections de page */
  --section-y: clamp(2.5rem, 6vw, 5.5rem);

  /* ---- Grille / gouttières ---------------------------------------------- */
  --largeur-max: 1440px;
  --largeur-texte: 68ch;
  --marge-page: 1rem;
  --gouttiere: 1rem;

  /* ---- Rayons ----------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- Ombres ----------------------------------------------------------- */
  --ombre-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
  --ombre-md: 0 4px 10px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.05);
  --ombre-lg: 0 12px 28px rgb(0 0 0 / 0.10), 0 4px 8px rgb(0 0 0 / 0.05);
  --ombre-xl: 0 24px 56px rgb(0 0 0 / 0.14);

  /* ---- Mouvement --------------------------------------------------------
     Animations sobres : apparition au scroll et transitions d'état.      */
  --duree-rapide: 120ms;
  --duree:        220ms;
  --duree-lente:  420ms;
  --courbe:       cubic-bezier(0.4, 0, 0.2, 1);
  --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Empilement ------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-menu:    300;
  /* Le voile du méga-menu passe SOUS l'en-tête : au-dessus, il interceptait
     tous les clics sur les liens du menu. Les tiroirs, eux, doivent bien
     recouvrir l'en-tête : ils utilisent --z-voile-tiroir. */
  --z-voile:        150;
  --z-voile-tiroir: 450;
  --z-tiroir:  500;
  --z-modale:  600;
  --z-toast:   700;

  /* ---- Hauteurs fixes utilisées par le sticky et le scroll-padding ------ */
  --h-annonce: 26px;
  --h-header:  52px;
}

@media (min-width: 768px) {
  :root {
    --marge-page: 2rem;
    --gouttiere: 1.5rem;
    --h-header: 56px;
  }
}

@media (min-width: 1280px) {
  :root {
    --marge-page: 3rem;
  }
}

/* Respect de la préférence système : on coupe tout le mouvement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide: 1ms;
    --duree: 1ms;
    --duree-lente: 1ms;
  }
}