/* ==========================================================================
   LELLA BEYA — DESIGN TOKENS  (style Bento)
   Pour changer le look du site : modifiez UNIQUEMENT ce fichier.
   (couleurs, polices, rayons, espacements, largeur de page)
   ========================================================================== */
:root {
  /* --- Marque : bleu de Sidi Bou Saïd + safran ----------------------------- */
  --c-accent:        #2a3df0;   /* boutons, liens, tuile principale (contraste AA avec du blanc) */
  --c-accent-hover:  #1f2fc4;
  --c-accent-bright: #ffc233;   /* safran : tuiles et touches vives */
  --c-accent-soft:   #e9ecff;   /* fond doux bleuté */
  --c-accent-line:   #cdd3ff;

  /* --- Couleurs des tuiles bento ------------------------------------------ */
  --t-blue:    #2a3df0;  --t-blue-ink:    #ffffff;
  --t-saffron: #ffc233;  --t-saffron-ink: #1b1600;
  --t-mint:    #c8f1df;  --t-mint-ink:    #0b3d2a;
  --t-lilac:   #e4defc;  --t-lilac-ink:   #271a5c;
  --t-peach:   #ffdcc9;  --t-peach-ink:   #5c2208;
  --t-ink:     #0f1330;  --t-ink-ink:     #f4f5ff;

  /* --- Neutres ------------------------------------------------------------ */
  --c-ink:      #0f1330;        /* en-tête, titres */
  --c-ink-2:    #1b2048;
  --c-text:     #2a2d45;
  --c-muted:    #626782;
  --c-bg:       #eceef6;        /* canevas */
  --c-surface:  #ffffff;        /* tuiles */
  --c-tint:     #f5f6fb;
  --c-border:   rgba(15, 19, 48, .08);
  --c-on-dark:  #f4f5ff;
  --c-on-dark-muted: #b4b9d9;

  /* --- États -------------------------------------------------------------- */
  --c-success: #0e7a4a;
  --c-danger:  #c7261c;
  --c-sale:    #ff4d2e;
  --c-star:    #ffb300;
  --c-wa:      #0e8f55;
  --c-wa-hover:#0a7544;

  /* --- Typographie -------------------------------------------------------- */
  --font-body:    'Figtree', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-base: 1rem;
  --lh-base: 1.6;
  --fw-heading: 800;

  /* --- Formes (bento = grands rayons) ------------------------------------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* --- Ombres (très discrètes, la structure vient des tuiles) -------------- */
  --sh-sm: 0 1px 2px rgba(15,19,48,.05);
  --sh-md: 0 10px 30px rgba(15,19,48,.10);
  --sh-lg: 0 24px 60px rgba(15,19,48,.18);
  --sh-accent: 0 10px 24px rgba(42,61,240,.30);

  /* --- Mise en page ------------------------------------------------------- */
  --container: 1280px;
  --gutter: clamp(12px, 3vw, 28px);
  --gap: clamp(10px, 1.4vw, 16px);   /* écart entre tuiles */
  --section-y: clamp(28px, 4vw, 56px);
  --header-h: 68px;

  /* --- Mouvement ---------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .25s;
}