/* =========================================================================
   SETTINGS — Design tokens (source : CLAUDE.md §2)
   Aucune règle de style ici, uniquement des variables.
   ========================================================================= */

:root {
  /* --- 2.1 Palette (charte officielle — PALETTE DE COULEURS.pdf) -------- */
  --color-red:   #B70000;  /* SIGNATURE — titres/accent (RVB 183/0/0) */
  --color-cream: #f3eeda;  /* fond principal + corps de texte sur rouge */
  --color-black: #050500;  /* texte de lecture sur crème + blocs sombres (hors palette 2-couleurs, usage UI) */

  /* Dérivés utilitaires (transparences pour scrims/ombres — pas de teinte nouvelle) */
  --color-black-80: rgba(5, 5, 0, .8);
  --color-black-00: rgba(5, 5, 0, 0);
  --color-black-15: rgba(5, 5, 0, .15);

  /* --- 2.3 Typographie (charte réelle, self-hosted) ------------------- */
  --font-display: 'Impact', 'Arial Narrow', sans-serif;   /* titres, accroches, wordmark */
  --font-body:    'Europa Grotesk', 'Helvetica Neue', Arial, sans-serif; /* corps, UI, labels */
  --font-hand:    'Permanent Marker', cursive;  /* accent manuscrit — handle réseau uniquement */

  /* Europa Grotesk = 2 graisses (Light 300 · Medium 500). Impact = display. */
  --fw-light:   300;   /* Europa Light */
  --fw-regular: 300;   /* corps = Europa Light (spec charte) */
  --fw-semi:    500;   /* Europa Medium — labels, nav, boutons, caps trackées */
  --fw-black:   900;   /* display (Impact, face 400–900) */

  /* --- 2.4 Échelle typographique (mobile → desktop via clamp) --------- */
  --fs-display: clamp(3rem, 6vw + 1rem, 6.875rem);    /* 48 → 110px */
  --fs-h1:      clamp(2.5rem, 4vw + 1rem, 4.5rem);    /* 40 → 72px  */
  --fs-h2:      clamp(1.875rem, 2.5vw + 1rem, 3rem);  /* 30 → 48px  */
  --fs-h3:      clamp(1.375rem, 1vw + 1rem, 1.875rem);/* 22 → 30px  */
  --fs-body-l:  1.125rem;  /* 18px */
  --fs-body:    1rem;      /* 16px */
  --fs-small:   .875rem;   /* 14px */
  --fs-label:   .75rem;    /* 12px (caps) */

  --lh-tight: 1.05;  /* display / titres */
  --lh-body:  1.5;   /* corps de texte */

  --ls-caps:     .25em;  /* caps trackées « SALEMENT BON » */
  --ls-wordmark: -.01em; /* wordmark SALTED BOY (Q3) */

  /* Tracking gros titres — resserrage pour densifier Poppins Black en grand */
  --ls-display: -.02em;  /* Display + H1 */
  --ls-h1:      -.02em;
  --ls-h2:      -.015em; /* H2 + H3 */
  --ls-h3:      -.015em;

  /* --- 2.5 Spacing scale (base 8px) ----------------------------------- */
  --space-4:   .25rem;
  --space-8:   .5rem;
  --space-12:  .75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* --- 2.6 Grille & breakpoints --------------------------------------- */
  /* Note : @media ne lit pas les custom properties → valeurs en dur (768/1440)
     dans les composants. Ici on garde les dimensions exploitables en calc/layout. */
  --container-max: 1280px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --margin-mobile: 16px;
  --margin-tablet: 32px;

  /* --- 2.7 Rayons ----------------------------------------------------- */
  --radius-pill: 999px;     /* boutons, pills SLTD */
  --radius-card: 4px;       /* cards — volontairement sec */
  --radius-sticker: 18px;   /* pills défilantes home — rectangle arrondi type sticker */

  /* --- Header (shell) ------------------------------------------------- */
  --header-h: 72px;
  --header-shadow: 0 2px 12px var(--color-black-15);
  --header-scrim-h: 80px;  /* Q1 — hauteur du scrim gradient sur hero */

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur-base: .28s;
  --dur-slow: .5s;
  --marquee-duration: 30s;        /* ancien marquee (hors home) */
  --pills-marquee-duration: 40s;  /* bande de pills home — plus lent, premium */

  /* --- Focus (ajout DA) ----------------------------------------------- */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* --- z-index -------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
}