/* =========================================================
   GUYENNE ENTREPRISES — Design Tokens
   Identité Maroc distincte — sombre éditorial + accent atlas
   ========================================================= */

:root {
  /* ---------- Couleurs (THÈME CLAIR — fond blanc, texte noir) ---------- */
  --c-bg:           #ffffff;       /* Blanc pur */
  --c-bg-soft:      #f5f4f0;       /* Sections alternées (très léger crème) */
  --c-surface:      #f0eee8;       /* Cards / surfaces élevées */
  --c-surface-2:    #e8e5dd;
  --c-line:         rgba(13, 13, 13, 0.12);
  --c-line-strong:  rgba(13, 13, 13, 0.24);

  --c-text:         #0d0d0d;       /* Noir profond */
  --c-text-muted:   #4a4a48;
  --c-text-dim:     #7a7a76;

  /* Couleur "sur accent" : dark sur les fonds malachite/héliotrope/razzmatazz */
  --c-on-accent:    #0d0d0d;

  /* Accent principal — Vert Malachite (signal d'action, CTA) */
  --c-accent:       #31EC56;
  --c-accent-soft:  #5af378;
  --c-accent-deep:  #1ec43e;

  /* Accent secondaire — Razzmatazz (énergie, points chauds) */
  --c-accent-2:     #EF036C;
  --c-accent-2-soft:#ff3a8a;
  --c-accent-2-deep:#c40057;

  /* Accent tertiaire — Héliotrope (notes éditoriales, italiques, surlignage) */
  --c-accent-3:     #EE72F8;
  --c-accent-3-soft:#f8a4ff;
  --c-accent-3-deep:#c947d6;

  /* Alias historique (compatibilité) */
  --c-accent-2-deep-old:#a85d35;

  /* Sémantique */
  --c-success:      #6fcf6a;
  --c-error:        #ef6a5a;

  /* ---------- Typographie ---------- */
  --ff-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ff-italic:  "Fraunces", "Times New Roman", serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-arabic:  "Noto Naskh Arabic", "Amiri", serif;

  /* Échelle typo fluide — clamp(min, vw, max) [REDUIT] */
  --fs-mega:   clamp(2.75rem, 7.5vw, 6.5rem);   /* hero — était 11rem max */
  --fs-h1:     clamp(2rem, 4.5vw, 3.75rem);     /* était 5.25rem max */
  --fs-h2:     clamp(1.6rem, 3.4vw, 2.75rem);   /* était 3.75rem max */
  --fs-h3:     clamp(1.25rem, 2.2vw, 1.85rem);
  --fs-h4:     clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:   clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-small:  0.85rem;
  --fs-eyebrow:0.74rem;

  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-base:   1.55;
  --lh-loose:  1.7;

  --ls-tight:  -0.03em;
  --ls-mega:   -0.045em;
  --ls-eyebrow:0.18em;

  /* ---------- Espacements (8pt + extras) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Sections */
  --section-pad-y: clamp(5rem, 10vw, 9rem);
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --container-max: 1440px;

  /* ---------- Rayons / formes ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 24px;
  --r-pill: 999px;

  /* ---------- Transitions ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   620ms;
  --t-slower: 1200ms;

  /* ---------- Couches Z ---------- */
  --z-base:   1;
  --z-sticky: 50;
  --z-nav:    100;
  --z-modal:  200;
  --z-cursor: 9999;

  /* ---------- Curseur custom ---------- */
  --cursor-size: 22px;
}

/* Empêche flash blanc tant que JS pas chargé */
html { background: var(--c-bg); color-scheme: dark; }