/* ═══════════════════════════════════════════════════════════
   TOKENS v2 — WANILO EXPRESS+
   Système visuel : Kicksflows / Apple Store, aux couleurs Wanilo.
   Source de vérité : DESIGN.md (racine du projet), §2 à §4.
   Générique : partagé par toutes les pages v2 (boutique, services,
   admin) — aucune règle spécifique à un écran ici.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Identité Wanilo (§2) ── */
  --navy-900: #071D3F;
  --navy-700: #0E3A7C;
  --gold-500: #FFC20E;
  --gold-600: #E5A800;

  /* --navy-900 servait a trois choses que le mode sombre separe :
     - fond de grande zone (en-tete, hero, pied) : il reste --navy-900 et
       s'assombrit d'un cran pour se detacher du fond de page ;
     - remplissage d'un element pose SUR la page (bouton principal, puce
       active, pastille d'etape) : --brand-fill, qui doit au contraire
       s'ECLAIRCIR, sans quoi un bouton navy sur un fond navy disparait ;
     - couleur de texte ou de bordure sur la page (nom de marque, prix,
       bouton secondaire) : --brand-ink, qui devient presque blanc.
     En clair, les trois valent la meme chose : rien ne change. */
  --brand-fill: #071D3F;
  --brand-ink:  #071D3F;
  /* Texte pose SUR --promo. Le rouge s'eclaircit en mode sombre : le blanc
     qui allait dessus n'y tient plus le contraste. */
  --on-promo: #FFFFFF;

  /* ── Action et sémantique (§2, mesurés kicksflows.com) ── */
  --action:       #0066CC;
  --action-hover: #0071E3;
  --promo: #D70015;
  --ok:    #16A34A;
  --warn:  #B45309;
  --err:   #D70015;

  /* ── Neutres (§2, mesurés kicksflows.com) ── */
  --canvas:       #FFFFFF;
  --canvas-2:     #F5F5F7;
  --surface-pearl:#FAFAFC;
  --ink:   #1D1D1F;
  --ink-2: #333333;
  --ink-3: #7A7A7A;
  --hairline: #E0E0E0;
  --divider:  #F0F0F0;

  /* ── Formes (§4, mesurés) ── */
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-btn:  12px;
  --r-pill: 9999px;

  /* ── Hauteurs (§4) ── */
  --h-btn:    52px;
  --h-btn-sm: 44px;
  --h-nav:    57px;
  --h-field:  48px;

  /* ── Trait or sous les titres de section (§4) ── */
  --gold-bar-w: 32px;
  --gold-bar-h: 4px;

  /* ── Layout (§4) ── */
  --container: 1120px;
  --container-pad: 24px;
  --section:    48px;
  --section-lg: 80px;

  /* ── Échelle d'espacement (§4) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 17px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 80px;

  /* Fond des barres translucides (en-tete, barre du bas, barre de fiche).
     Un token et non un litteral : ces trois barres etaient ecrites en
     rgba(245, 245, 247, .92) en dur et restaient blanches en mode sombre,
     deux bandes lumineuses en haut et en bas d'une page sombre. */
  --bar-bg: rgba(245, 245, 247, .92);
  /* Fond des statuts « en attente » : le jaune tres pale devient illisible
     avec un texte clair. */
  --warn-bg: #FFF4E5;
  --notice-bg: #FFF7DB;
  --notice-ink: #8A6100;

  /* ── Ombres — deux seules autorisées (§4, §7) ── */
  --shadow-product: 0 20px 40px -20px rgba(0, 0, 0, .25);
  --shadow-sheet:   0 -8px 30px rgba(0, 0, 0, .08);

  /* ── Typographie (§3) : une seule famille, Inter ── */
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   MODE SOMBRE
   Le DESIGN.md ne definit qu'une palette claire : celle-ci en est
   derivee, pas inventee. Trois principes.

   1. Le sombre de Wanilo est son NAVY, pas un gris. --navy-900
      (#071D3F) habille deja l'en-tete, le hero et le pied de page :
      en mode sombre il descend au rang de fond de page, assombri
      d'un cran pour que l'en-tete reste distinct du corps. Un
      #1A1A1A neutre aurait efface l'identite de la marque au moment
      ou elle occupe tout l'ecran.

   2. --navy-900 servait a trois choses que le sombre separe : fond
      de grande zone (il reste --navy-900), remplissage d'un element
      pose sur la page (--brand-fill, qui doit s'ECLAIRCIR sinon un
      bouton navy sur fond navy disparait) et couleur de texte ou de
      bordure (--brand-ink, presque blanc).

   3. Les couleurs semantiques sont ECLAIRCIES, pas reprises telles
      quelles : --action (#0066CC) et --err (#D70015) tombent sous
      3:1 de contraste sur un fond navy, donc illisibles la ou elles
      comptent le plus, un refus de paiement ou un lien d'action.
      Contrastes mesures apres correction : --ink 17,1, --ink-2 12,4,
      --ink-3 7,1, --action 6,5, --err 6,6, --ok 9,5, --warn 9,1.

   Trois etats, dans cet ordre de priorite :
   - [data-theme="dark"]  : choix explicite du visiteur (bouton)
   - [data-theme="light"] : choix explicite inverse, doit l'emporter
     sur la preference systeme, d'ou le :not() sur la requete media
   - prefers-color-scheme : reglage du telephone, par defaut
   ═══════════════════════════════════════════════════════════ */

/* Les valeurs ne vivent qu'ici. Les deux selecteurs ci-dessous ne font que
   les affecter aux tokens du DESIGN.md : une palette ecrite deux fois derive
   toujours. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --dark-canvas:  #061529;
  --dark-canvas2: #0A1F3C;
  --dark-pearl:   #0E2748;
  --dark-ink:     #F5F7FA;
  --dark-ink2:    #C9D6E8;
  --dark-ink3:    #8CA3C2;
  --dark-hairline:#1C3557;
  --dark-divider: #14294A;
  --dark-action:  #4D9BFF;
  --dark-action-h:#7AB4FF;
  --dark-navy:    #04101F;
  /* Deux contraintes a la fois : se detacher du fond #061529 (3,10, la ou le
     navy d'origine ne donnait que 1,3 et disparaissait) et porter du blanc
     lisible (5,91). Un bleu plus clair gagnerait sur le fond mais perdrait son
     texte, un plus fonce l'inverse. */
  --dark-brand-fill: #2563B8;
  --dark-brand-ink:  #E8EEF8;
  --dark-on-promo:   #3A0006;
  --dark-ok:      #34D399;
  --dark-warn:    #F0A94A;
  --dark-err:     #FF6B6B;
  --dark-bar-bg:    rgba(6, 21, 41, .92);
  --dark-warn-bg:   rgba(240, 169, 74, .16);
  --dark-notice-bg: rgba(240, 169, 74, .16);
  --dark-notice-ink:#F0A94A;
  /* Sur fond sombre une ombre portee ne se voit pas : c'est le halo clair qui
     detache la carte, comme le fait Apple en mode sombre. */
  --dark-shadow-product: 0 20px 40px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --dark-shadow-sheet:   0 -8px 30px rgba(0, 0, 0, .5), 0 -1px 0 rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) : sans cette garde, quelqu'un qui a
     explicitement demande le mode clair verrait quand meme le sombre des que
     son telephone est en sombre. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas:         var(--dark-canvas);
    --canvas-2:       var(--dark-canvas2);
    --surface-pearl:  var(--dark-pearl);
    --ink:            var(--dark-ink);
    --ink-2:          var(--dark-ink2);
    --ink-3:          var(--dark-ink3);
    --hairline:       var(--dark-hairline);
    --divider:        var(--dark-divider);
    --action:         var(--dark-action);
    --action-hover:   var(--dark-action-h);
    --navy-900:       var(--dark-navy);
    --brand-fill:     var(--dark-brand-fill);
    --brand-ink:      var(--dark-brand-ink);
    --ok:             var(--dark-ok);
    --warn:           var(--dark-warn);
    --err:            var(--dark-err);
    --promo:          var(--dark-err);
    --on-promo:       var(--dark-on-promo);
    --bar-bg:         var(--dark-bar-bg);
    --warn-bg:        var(--dark-warn-bg);
    --notice-bg:      var(--dark-notice-bg);
    --notice-ink:     var(--dark-notice-ink);
    --shadow-product: var(--dark-shadow-product);
    --shadow-sheet:   var(--dark-shadow-sheet);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:         var(--dark-canvas);
  --canvas-2:       var(--dark-canvas2);
  --surface-pearl:  var(--dark-pearl);
  --ink:            var(--dark-ink);
  --ink-2:          var(--dark-ink2);
  --ink-3:          var(--dark-ink3);
  --hairline:       var(--dark-hairline);
  --divider:        var(--dark-divider);
  --action:         var(--dark-action);
  --action-hover:   var(--dark-action-h);
  --navy-900:       var(--dark-navy);
  --brand-fill:     var(--dark-brand-fill);
  --brand-ink:      var(--dark-brand-ink);
  --ok:             var(--dark-ok);
  --warn:           var(--dark-warn);
  --err:            var(--dark-err);
  --promo:          var(--dark-err);
  --on-promo:       var(--dark-on-promo);
  --bar-bg:         var(--dark-bar-bg);
  --warn-bg:        var(--dark-warn-bg);
  --notice-bg:      var(--dark-notice-bg);
  --notice-ink:     var(--dark-notice-ink);
  --shadow-product: var(--dark-shadow-product);
  --shadow-sheet:   var(--dark-shadow-sheet);
}

/* Tailles/graisses/interlettrages de §3 — exposées en classes utilitaires
   pour rester génériques (pas de sélecteur lié à une page précise ici).

   Échelle réduite d'un cran le 04/09/2026 à la demande du propriétaire : les
   titres et les prix mangeaient l'écran sur un téléphone, un prix de 34 px
   pesant autant qu'un titre de page. DESIGN.md §3 a été mis à jour du même
   coup : le laisser en arrière ferait repartir chaque nouvel écran sur
   l'ancienne échelle, et l'app deviendrait incohérente sans que personne ne
   sache laquelle fait foi. */
.t-hero-title  { font: 600 28px/32px var(--font); letter-spacing: -0.5px; }
.t-hero-lead   { font: 400 19px/25px var(--font); }
.t-section     { font: 600 24px/27px var(--font); }
.t-price       { font: 700 26px/30px var(--font); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.t-price-card  { font: 600 17px/22px var(--font); }
.t-card-title  { font: 600 17px/22px var(--font); }
.t-body        { font: 400 17px/25px var(--font); }
.t-btn-primary { font: 500 18px/18px var(--font); }
.t-btn-secondary{ font: 400 17px/17px var(--font); }
.t-caption     { font: 400 14px/20px var(--font); }
.t-badge       { font: 700 12px/16px var(--font); }

@media (min-width: 1120px) {
  .t-hero-title { font-size: 40px; line-height: 44px; }
}