/* =============================================================
   tokens.css — Design System Wincash

   Source : Claude Design, LP-02B V2 — section « Tokens CSS exportables »
   de `docs/design/Wincash Design System livré/Wincash Design System.dc.html`.
   Validé en LP-02C (docs/LP-02C_DESIGN_VALIDATION.md).

   Ce fichier est la seule source des valeurs de design. Aucune couleur,
   graisse, taille, espacement, rayon ni ombre ne doit être écrit en dur
   ailleurs : tout passe par ces variables.

   Ordre de dominance de la palette : blanc → bleu ciel → bleu nuit →
   turquoise → accents univers. Le turquoise n'est jamais un fond de section.
   ============================================================= */

:root {
  /* --- Couleurs ------------------------------------------------ */
  --color-white:            #FFFFFF;
  --color-bg-soft:          #F5F9FC;
  --color-sky:              #4FA8E8;
  --color-sky-light:        #DDEEFB;
  --color-sky-tint:         #EEF6FD;
  --color-navy:             #0F2A4A;
  --color-navy-2:           #1E4A7A;
  --color-teal:             #0B7A76;
  --color-teal-hover:       #096663;
  --color-teal-tint:        #E3F3F2;
  --color-text:             #142B47;
  --color-text-muted:       #4E6178;
  --color-border:           #E3EBF3;
  --color-border-strong:    #C9D6E3;
  --color-focus:            #0B7A76;
  --color-error:            #B42318;
  --color-error-bg:         #FEF0EE;
  --color-success:          #067647;
  --color-success-bg:       #E6F4EC;

  /* --- Accent des pictogrammes ---------------------------------
     V1.2 — l'ADN de marque n'admet que le turquoise en accent
     (blanc dominant > bleu ciel > bleu nuit > turquoise). La V1.0
     codait chaque univers par une couleur : le violet #6B5BD6 des
     « Réductions » et l'orange #D96F1F des « Cartes cadeaux » en
     sortaient, et les neuf cibles de /partenaires affichaient quatre
     teintes sans logique. Un accent unique rend le systeme lisible ;
     les univers restent distingues par leur pictogramme et leur photo.
     Voir docs/AUDIT_PREMIUM_V1_2.md, H5. */
  --color-accent:           #0B7A76;  --color-accent-tint:      #DDF3F1;

  /* Bleu ciel clair réservé aux textes sur fond bleu nuit */
  --color-on-navy-accent:   #7FC4F0;

  /* --- Typographie — WOFF2 auto-hébergées (assets/fonts/) ------ */
  --font-sans:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", cursive;          /* D4 — décoratif, aria-hidden */
  /* V1.2 — 3,25 rem faisait tenir le H1 de l'accueil sur QUATRE lignes
     dans une colonne de 522 px, avec une coupe malheureuse. 2,75 rem
     le ramene a trois lignes sans affaiblir la hierarchie (M1). */
  --fs-h1:   clamp(2rem, 3.6vw, 2.75rem);  --lh-h1: 1.1;   --ls-h1: -0.025em;
  --fs-h2:   clamp(1.6rem, 3vw, 2.25rem);   --lh-h2: 1.15;  --ls-h2: -0.02em;
  --fs-h3:   1.25rem;                        --lh-h3: 1.3;
  --fs-lead: 1.125rem;                       --fs-body: 1rem; --lh-body: 1.6;
  --fs-small: 0.9375rem;                     --fs-caption: 0.875rem;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* --- Espacements --------------------------------------------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2.5rem;  --space-5: 4rem;   --space-6: 5rem;  --space-7: 6rem;
  --section-y: 5rem;  --section-y-mobile: 3rem;
  --gutter: 1.5rem;   --gutter-mobile: 1.25rem;

  /* --- Formes --------------------------------------------------- */
  --radius-btn: 12px;  --radius-field: 12px; --radius-tile: 16px;
  --radius-card: 20px; --radius-block: 24px; --radius-pill: 999px;
  --shadow-card:   0 4px 24px rgba(15, 42, 74, .06);
  --shadow-hover:  0 10px 32px rgba(15, 42, 74, .10);
  --shadow-header: 0 2px 12px rgba(15, 42, 74, .04);
  --shadow-device: 0 30px 60px -20px rgba(15, 42, 74, .35);

  /* --- Dimensions ----------------------------------------------- */
  --container: 1200px;
  --header-h: 72px; --header-h-mobile: 64px;
  --btn-h: 48px; --btn-h-mobile: 50px; --field-h: 48px; --target-min: 44px;
  --focus-ring: 3px solid var(--color-focus); --focus-offset: 2px;

  /* --- Mouvement ------------------------------------------------ */
  --motion-fast: 200ms; --motion-base: 300ms; --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}