/*
 * tokens.css — Calzedonia Maroc Design System
 * Valeurs extraites du CSS source (Emotion inline, seocontent.css, JS bundles)
 * Augmentées des tokens Maroc (accent, sable, zellige)
 * Base rem = 14px (convention Foundation source confirmée)
 */

/* ─────────────────────────────────────────────
   @font-face — Spezia (polices propriétaires)
   WOFF2 prioritaire → WOFF → OTF fallback
   ───────────────────────────────────────────── */

@font-face {
  font-family: 'Spezia';
  src: url('../fonts/Spezia-Regular/Spezia-Regular.woff2') format('woff2'),
       url('../fonts/Spezia-Regular/Spezia-Regular.woff')  format('woff'),
       url('../fonts/Spezia-Regular/Spezia-Regular.otf')   format('opentype');
  font-weight: 100 499;  /* couvre light(300) + regular(400) — seul fichier disponible */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spezia';
  src: url('../fonts/Spezia-SemiBold/Spezia-SemiBold.woff2') format('woff2'),
       url('../fonts/Spezia-SemiBold/Spezia-SemiBold.woff')  format('woff'),
       url('../fonts/Spezia-SemiBold/Spezia-SemiBold.otf')   format('opentype');
  font-weight: 500 900;  /* couvre medium(500) + semibold(600) + bold(700) */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpeziaExtended';
  src: url('../fonts/SpeziaExtended-Regular/SpeziaExtended-Regular.woff2') format('woff2'),
       url('../fonts/SpeziaExtended-Regular/SpeziaExtended-Regular.woff')  format('woff'),
       url('../fonts/SpeziaExtended-Regular/SpeziaExtended-Regular.otf')   format('opentype');
  font-weight: 100 499;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SpeziaExtended';
  src: url('../fonts/SpeziaExtended-SemiBold/SpeziaExtended-SemiBold.woff2') format('woff2'),
       url('../fonts/SpeziaExtended-SemiBold/SpeziaExtended-SemiBold.woff')  format('woff'),
       url('../fonts/SpeziaExtended-SemiBold/SpeziaExtended-SemiBold.otf')   format('opentype');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   :root — Tokens globaux
   ───────────────────────────────────────────── */
:root {

  /* ── Couleurs primaires (extraites — production-confirmed) ── */
  --color-primary:        #D71F56;    /* rose/fuchsia Calzedonia — CTAs, badges, prix soldés */
  --color-primary-dark:   #B01845;    /* assombri ×0.82 pour hover/focus */
  --color-primary-light:  #FFD6E2;    /* teinté clair pour badges subtils (extrait main.js) */
  --color-black:          #000000;    /* noir absolu — CTA filled, stripe, texte fort */
  --color-white:          #FFFFFF;    /* blanc — fonds principaux, texte sur noir */

  /* ── Textes (extraits des styles Emotion) ── */
  --color-text-primary:   #000000;    /* corps principal */
  --color-text-secondary: #646464;    /* nav items desktop, descriptions */
  --color-text-tertiary:  #767676;    /* metadata, labels discrets — 4.54:1 sur blanc (WCAG AA) */
  --color-text-inverted:  #FFFFFF;    /* sur fond noir */

  /* ── Fonds neutres (extraits) ── */
  --color-neutral-50:     #FAFAFA;    /* fond subtil (proche source) */
  --color-neutral-100:    #F5F5F5;    /* fond gris — SEO sections, FAQ, badges */
  --color-neutral-200:    #EEEEEE;    /* fond medium (extrait main.js) */
  --color-neutral-300:    #DEDEDE;    /* bordures — product cards, footer cards */
  --color-neutral-400:    #CDCDCD;    /* bordures secondaires (extrait) */
  --color-neutral-600:    #979797;    /* alias text-tertiary */
  --color-neutral-700:    #646464;    /* alias text-secondary */
  --color-neutral-900:    #1A1A1A;    /* quasi-noir pour textes longs */

  /* ── Éditorial (extraits) ── */
  --color-editorial:      #ECE6DD;    /* beige chaud — category banners (css-bljzij extrait) */
  --color-editorial-warm: #EEE1CD;    /* variante plus chaude (extrait main.js) */
  --color-editorial-sand: #F2EFED;    /* sable très clair (extrait main.js) */

  /* ── Promotionnel (extrait) ── */
  --color-promo:          #F6C84C;    /* jaune promo — badges promotionnels (main.js ×2) */
  --color-promo-dark:     #FFCB42;    /* variante jaune (extrait main.js) */

  /* ── Accent Maroc (liberté créative — non extraites du source) ── */
  --color-accent-maroc:        #D4AF37;    /* or chérifien — fond coloré uniquement */
  --color-accent-maroc-text:   #7A6200;    /* or sombre — texte sur fond blanc (5.65:1 WCAG AA) */
  --color-accent-zellige:      #1B6B8A;    /* bleu zellige de Fès */
  --color-sand:                #F2E8DC;    /* sable désert — légèrement plus chaud qu'editorial */

  /* ── Système / États ── */
  --color-error:          #D71F56;    /* réutilise primary — convention Calzedonia */
  --color-success:        #2E7D5E;    /* vert succès — [SOURCE MANQUANTE — proposition] */
  --color-overlay:        rgba(0, 0, 0, 0.48);  /* overlay modales (--chakra-colors-blackAlpha-600) */
  --color-overlay-light:  rgba(0, 0, 0, 0.16);  /* overlay subtil (--chakra-colors-blackAlpha-300) */

  /* ── Typographie — familles ── */
  --font-heading:   'SpeziaExtended', Georgia, serif;          /* headings, hero display */
  --font-heading-sb:'SpeziaExtended', Georgia, serif;          /* + font-weight:600 */
  --font-body:      'Spezia', Helvetica, system-ui, sans-serif;/* corps, nav, UI */
  --font-body-sb:   'Spezia', Helvetica, system-ui, sans-serif;/* + font-weight:600 */
  --font-arabic:    'Noto Sans Arabic', 'Scheherazade New', sans-serif; /* AR-MA uniquement */
  --font-mono:      'SF Mono', 'Fira Code', monospace;          /* debug / prix structurés */

  /* ── Typographie — poids ── */
  --fw-light:    300;   /* body nav descriptions (source: font-weight:300) */
  --fw-regular:  400;   /* corps standard, liens footer */
  --fw-medium:   500;   /* SemiBold Calzedonia (HelveticaNeue-SemiBold = 500 dans source) */
  --fw-semibold: 600;   /* Spezia SemiBold — headings forts */

  /* ── Typographie — tailles (base rem = 14px, extraites du source) ── */
  --text-2xs:  0.643rem;   /* ~9px  — micro labels */
  --text-xs:   0.75rem;    /* 10.5px — stripe promo (extrait css-v4bveg) */
  --text-sm:   0.875rem;   /* 12.25px — nav desktop, body small, boutons (extrait) */
  --text-base: 1rem;       /* 14px — corps standard (extrait) */
  --text-md:   1.125rem;   /* 15.75px — (extrait) */
  --text-lg:   1.25rem;    /* 17.5px — titres sections mobile (extrait css-1rn8m6n) */
  --text-xl:   1.5rem;     /* 21px — hero titre mobile (extrait css-1ikaiz9) */
  --text-2xl:  2rem;       /* 28px — hero titre desktop md (extrait) */
  --text-3xl:  2.28571rem; /* 32px — h3 SEO (extrait seocontent.css) */
  --text-4xl:  2.5rem;     /* 35px — hero titre desktop lg (extrait css-1ikaiz9) */

  /* ── Typographie — interlignage (extraits) ── */
  --leading-tight:    1.125rem;   /* small text (extrait) */
  --leading-snug:     1.25rem;    /* standard (extrait) */
  --leading-normal:   1.375rem;   /* stripe, paragraphes larges */
  --leading-relaxed:  1.5rem;     /* headings sections (extrait) */
  --leading-hero-sm:  1.75rem;    /* hero mobile (extrait) */
  --leading-hero-lg:  2.75rem;    /* hero desktop (extrait) */
  --leading-display:  1.2;        /* grands titres display */

  /* ── Espacement (extraits des styles inline, arrondi à la grille de 4px) ── */
  --space-1:   0.25rem;    /* 3.5px — micro */
  --space-2:   0.5rem;     /* 7px */
  --space-3:   0.625rem;   /* 8.75px (extrait: margin-right:0.625rem icons) */
  --space-4:   1rem;       /* 14px — base unit */
  --space-5:   1.25rem;    /* 17.5px — padding cards mobile (extrait css-ahwik1) */
  --space-6:   1.5rem;     /* 21px — gap nav desktop (extrait css-pv0wsw) */
  --space-7:   1.71429rem; /* 24px — margin cell mobile (extrait seocontent.css) */
  --space-8:   2rem;       /* 28px — padding category banner mobile (extrait) */
  --space-10:  2.5rem;     /* 35px — padding cards desktop (extrait) */
  --space-11:  2.68571rem; /* 37.6px — margin cell desktop (extrait seocontent.css) */
  --space-12:  3.125rem;   /* 43.75px — gap cards desktop (extrait css-ahwik1) */
  --space-16:  4rem;       /* 56px */
  --space-20:  5rem;       /* 70px */

  /* ── Sections padding (extraits seocontent.css) ── */
  --section-pad-x-mobile:  40px;
  --section-pad-x-desktop: 60px;
  --section-pad-y-mobile:  40px;
  --section-pad-y-desktop: 60px;

  /* ── Rayon de bordure (extraits) ── */
  --radius-none:  0;
  --radius-xs:    0.125rem;   /* 1.75px — boutons CTA (extrait css-j9vlmb) */
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;
  --radius-full:  9999px;     /* pilules, badges ronds */

  /* ── Bordures ── */
  --border-thin:   0.03125rem;  /* ~0.4px → rendu 1px (extrait css-j9vlmb) */
  --border-1:      1px;
  --border-card:   0.0625rem;   /* 0.875px → rendu 1px (extrait css-ahwik1) */

  /* ── Stripe promo — accent or chérifien sur noir ── */
  --stripe-height: 2.5rem;      /* 35px — légèrement agrandie */
  --stripe-font:   0.8125rem;   /* 11.4px */
  --stripe-bg:     var(--color-black);
  --stripe-color:  var(--color-accent-maroc);   /* #D4AF37 */

  /* ── Header (aéré, premium — calculé sur le bloc logo clamp + pill) ── */
  --header-height-mobile:  4rem;     /* 56px */
  --header-height-desktop: 6rem;     /* 84px — loge logo clamp(max 3.2rem) + pill */
  --header-z:              100;

  /* ── Breakpoints (extraits --chakra-breakpoints-*) ── */
  --bp-sm:   375px;    /* mobile courant */
  --bp-md:   768px;    /* tablette */
  --bp-lg:   1024px;   /* desktop */
  --bp-xl:   1440px;   /* grand écran */
  --bp-2xl:  1920px;   /* très grand écran */

  /* ── Largeur de conteneur maximale (= largeur de design 1440px) ── */
  --container-max: 90rem;   /* 1260px @14px base ≈ aligné sur .container max-width */

  /* ── Z-index stack ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-sticky:   100;    /* header */
  --z-dock:     180;    /* encoche flottante (sous le méga-menu, au-dessus du contenu) */
  --z-megamenu: 200;    /* méga-menu pleine largeur (au-dessus du contenu) */
  --z-overlay:  200;    /* modales overlay */
  --z-modal:    300;    /* modales */
  --z-toast:    400;    /* notifications */
  --z-chatbot:  500;    /* widget chatbot flottant */

  /* ── Transitions (extraites --chakra-transition-*) ── */
  --transition-fast:   200ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow:   500ms ease-out;    /* arrow hover (extrait css-ahwik1) */
  --transition-props:  background-color, border-color, color, fill, stroke,
                       opacity, box-shadow, transform;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.16);

  /* ── Bouton outline Calzedonia (extrait css-j9vlmb / css-4kcqde) ── */
  --btn-height:       2.125rem;    /* 29.75px */
  --btn-pad-x:        1.25rem;
  --btn-pad-y:        0.75rem;
  --btn-font-size:    0.875rem;
  --btn-border:       var(--border-thin) solid var(--color-black);
  --btn-radius:       var(--radius-xs);
  --btn-transition:   var(--transition-fast);

  /* ── Carte produit (extrait css-wpqgce) ── */
  --card-pad-x:       1rem;
  --card-border:      var(--border-card) solid var(--color-neutral-300);

  /* ── Footer cards (extrait css-ahwik1) ── */
  --footer-card-pad-mobile:  1.25rem 1rem;
  --footer-card-pad-desktop: 2.5rem;
  --footer-card-gap-mobile:  1.875rem;
  --footer-card-gap-desktop: 3.125rem;
  --footer-card-border:      var(--border-card) solid var(--color-neutral-300);

  /* ── Chatbot / WhatsApp (additions Maroc) ── */
  --chatbot-z:          var(--z-chatbot);
  --whatsapp-color:     #25D366;
  --whatsapp-color-dark:#128C7E;
}

/* ─────────────────────────────────────────────
   Mode sombre — non implémenté (MVP)
   Prévu : [media prefers-color-scheme: dark]
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   Direction RTL — surcharges logiques
   Activé via <html dir="rtl"> (rtl.js)
   ───────────────────────────────────────────── */
[dir="rtl"] {
  --font-body:    'Noto Sans Arabic', 'Scheherazade New', sans-serif;
  --font-heading: 'Noto Sans Arabic', 'Scheherazade New', sans-serif;
}

/*
 * Script arabe connectif — letter-spacing brise les liaisons entre glyphes.
 * Réinitialisation universelle + text-indent (compensation optique non applicable).
 */
[dir="rtl"] * {
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}