/* ============================================================
   STAR TRACK BÉNIN — REFONTE V2 « LE MAGASIN »
   variables.css — Design tokens
   Retail chaleureux · arêtes vives · Poppins + Inter
   ============================================================ */

:root {
  /* ---- Encres & fonds ---- */
  --ink:        #211B16;   /* charbon chaud */
  --ink-2:      #38302A;
  --paper:      #FFFFFF;
  --bg:         #FBFAF7;   /* blanc chaud (fond page) */
  --bg-sand:    #F5F0E8;   /* sable — sections alternées */
  --line:       #EAE4DA;   /* filets chauds */
  --muted:      #7A7069;

  /* ---- Signature Star Track ---- */
  --red:        #D01E32;
  --red-deep:   #A31222;
  --red-soft:   #FCEDee;

  /* ---- Promos & statuts ---- */
  --orange:      #FF7A00;   /* deals / remises */
  --orange-deep: #E05F00;
  --orange-soft: #FFF2E3;
  --green:       #189A50;
  --green-soft:  #E6F5EC;

  /* ---- Accents univers (rayons) ---- */
  --u-froid:      #D01E32;
  --u-climat:     #0E7490;
  --u-cuisine:    #D96C06;
  --u-image:      #6D28D9;
  --u-lavage:     #0F766E;

  --u-froid-tint:   #FCEDEF;
  --u-climat-tint:  #E7F3F7;
  --u-cuisine-tint: #FDF1E3;
  --u-image-tint:   #F2ECFB;
  --u-lavage-tint:  #E7F3F1;

  /* ---- Typographie ---- */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --text-xs:  clamp(.72rem, .69rem + .15vw, .78rem);
  --text-sm:  clamp(.84rem, .81rem + .15vw, .9rem);
  --text-md:  clamp(.95rem, .92rem + .18vw, 1.02rem);
  --text-lg:  clamp(1.08rem, 1.02rem + .3vw, 1.25rem);
  --text-xl:  clamp(1.35rem, 1.2rem + .75vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2.3rem, 1.8rem + 2.4vw, 3.8rem);
  --text-hero: clamp(2.7rem, 1.7rem + 5vw, 5.4rem);

  /* ---- Espacements ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 6.5rem;
  --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* ---- Structure ---- */
  --container: 1320px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 74px;
  --topbar-h: 38px;
  --rail-w: 290px;

  /* ---- Arêtes vives : règle absolue ---- */
  --radius: 0;

  /* ---- Mouvement ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur-med: .35s;
  --dur-slow: .7s;

  /* ---- Élévation douce ---- */
  --shadow-sm: 0 2px 10px rgba(33,27,22,.06);
  --shadow-md: 0 12px 30px rgba(33,27,22,.10);
  --shadow-lg: 0 24px 60px rgba(33,27,22,.16);
  --shadow-pop: 0 14px 34px rgba(208,30,50,.28);

  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-toast: 400;
}

/* Accents par rayon via attribut */
[data-universe="froid"]    { --acc: var(--u-froid);   --acc-tint: var(--u-froid-tint); }
[data-universe="climat"]   { --acc: var(--u-climat);  --acc-tint: var(--u-climat-tint); }
[data-universe="cuisine"]  { --acc: var(--u-cuisine); --acc-tint: var(--u-cuisine-tint); }
[data-universe="image-son"]{ --acc: var(--u-image);   --acc-tint: var(--u-image-tint); }
[data-universe="lavage"]   { --acc: var(--u-lavage);  --acc-tint: var(--u-lavage-tint); }