/* ============================================================================
   MOOV VITRINE — Design tokens · variante COUTURE
   Source de vérité. Ne jamais coder une valeur en dur : toujours var(--mv-*).

   Référence de rendu : la retenue des grandes maisons de soin parisiennes —
   blanc, encre noire, un serif de titrage, un filet gris, et le rouge comme
   seul signal. Pas de couleur de marque, pas d'ombre, pas d'angle arrondi.
   La hiérarchie tient à la typographie et au blanc, jamais au fond coloré.

   Écart assumé à la référence : le corps de texte y descend à 13 px. On tient
   16 px sur mobile — en dessous, iOS zoome au focus et la lecture souffre.
   Le sentiment tient à la graisse et au blanc, pas à la petitesse.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── 1. Rampes primitives ────────────────────────────────────────────────
     Ne jamais utiliser directement dans un composant. Passer par §2. */

  /* Encre — le noir est pur, c'est la signature */
  --mv-ink-1000: #000000;   /* texte, bouton primaire, fond immersif        */
  --mv-ink-900:  #1A1A1A;
  --mv-ink-800:  #333333;   /* survol du bouton primaire                    */

  /* Neutres — gris strictement neutres, aucune teinte */
  --mv-neutral-700: #575757;  /* texte secondaire (7.0:1)                   */
  --mv-neutral-600: #6E6E6E;  /* (5.3:1)                                    */
  --mv-neutral-500: #767676;  /* plancher pour du texte (4.6:1)             */
  --mv-neutral-400: #9E9E9E;  /* décor et états inactifs, jamais du texte   */
  --mv-neutral-300: #CACACA;  /* bordure visible                            */
  --mv-neutral-200: #EDEDED;  /* filet                                      */
  --mv-neutral-100: #F7F7F7;  /* fond des visuels produit                   */

  /* Papier — le site est blanc, franchement blanc. Les sections se séparent
     au filet, pas au fond gris : c'est ce qui distingue une maison d'un
     catalogue. Le gris ne sert plus qu'à asseoir les packshots (§2). */
  --mv-paper:    #FFFFFF;
  --mv-paper-alt:#FFFFFF;
  --mv-white:    #FFFFFF;

  /* Signal — un seul rouge, réservé au prix barré et à la rareté.
     Jamais un bouton primaire, jamais un fond de section. */
  --mv-signal-700: #A31200;  /* texte sur clair (7.4:1)                     */
  --mv-signal-600: #C21500;  /* aplat portant du blanc (6.0:1)              */
  --mv-signal-500: #E91802;
  --mv-signal-100: #FCE9E6;

  /* Statuts — désaturés pour ne pas concurrencer le signal */
  --mv-success: #1F6B4B;
  --mv-danger:  #A31200;
  --mv-warning: #7A5200;
  --mv-info:    #333333;

  /* ── 2. Tokens sémantiques ───────────────────────────────────────────── */
  --mv-bg:            var(--mv-paper);
  --mv-bg-alt:        var(--mv-paper-alt);
  --mv-surface:       var(--mv-white);
  /* Le seul gris de fond qui reste : celui sous les visuels produit. Sans lui
     un flacon blanc sur fond blanc n'a plus de contour. */
  --mv-surface-sunk:  var(--mv-neutral-100);
  --mv-surface-brand: var(--mv-neutral-100);
  --mv-surface-invert:var(--mv-ink-1000);

  --mv-text:          var(--mv-ink-1000);
  --mv-text-muted:    var(--mv-neutral-700);
  --mv-text-subtle:   var(--mv-neutral-500);
  --mv-text-brand:    var(--mv-ink-1000);
  --mv-text-invert:   var(--mv-white);
  --mv-text-on-accent:var(--mv-white);

  --mv-border:        var(--mv-neutral-300);
  --mv-border-soft:   var(--mv-neutral-200);
  --mv-border-strong: var(--mv-ink-1000);

  --mv-brand:         var(--mv-ink-1000);
  --mv-brand-hover:   var(--mv-ink-800);
  --mv-brand-fill:    var(--mv-ink-1000);

  /* Action primaire : l'encre, toujours. */
  --mv-action:        var(--mv-ink-1000);
  --mv-action-hover:  var(--mv-ink-800);
  --mv-action-text:   var(--mv-white);

  --mv-accent:        var(--mv-signal-600);
  --mv-accent-hover:  var(--mv-signal-700);
  --mv-accent-quiet:  var(--mv-signal-100);
  --mv-accent-text:   var(--mv-signal-700);

  --mv-focus:         var(--mv-ink-1000);
  --mv-focus-offset:  var(--mv-bg);

  /* ── 3. Typographie ──────────────────────────────────────────────────── */
  --mv-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --mv-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;
  --mv-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle fluide 360px → 1440px. Le corps ne descend jamais sous 16 px ;
     les titres montent haut, c'est là que la maison parle. */
  --mv-text-xs:   clamp(0.6875rem, 0.667rem + 0.093vw, 0.75rem);
  --mv-text-sm:   clamp(0.8125rem, 0.792rem + 0.093vw, 0.875rem);
  --mv-text-base: clamp(1rem,      1rem     + 0vw,     1rem);
  --mv-text-lg:   clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);
  --mv-text-xl:   clamp(1.25rem,   1.208rem + 0.185vw, 1.375rem);
  --mv-text-2xl:  clamp(1.5rem,    1.417rem + 0.370vw, 1.75rem);
  --mv-text-3xl:  clamp(1.875rem,  1.667rem + 0.926vw, 2.5rem);
  --mv-text-4xl:  clamp(2.25rem,   1.875rem + 1.667vw, 3.375rem);
  --mv-text-5xl:  clamp(2.75rem,   2.125rem + 2.778vw, 4.625rem);
  --mv-text-6xl:  clamp(3.25rem,   2.25rem + 4.444vw, 6rem);

  --mv-leading-tight: 1.08;
  --mv-leading-snug:  1.22;
  --mv-leading-body:  1.65;
  --mv-leading-loose: 1.8;

  --mv-tracking-display: -0.005em;  /* un serif de titrage ne se resserre pas */
  --mv-tracking-tight:   -0.005em;
  --mv-tracking-normal:   0;
  --mv-tracking-eyebrow:  0.14em;   /* filets de texte : eyebrows, boutons   */

  --mv-weight-regular: 300;         /* le corps est fin, c'est la signature  */
  --mv-weight-medium:  400;
  --mv-weight-semibold:500;

  --mv-measure: 68ch;

  /* ── 4. Espacement — base 4px ────────────────────────────────────────── */
  --mv-space-0:  0;
  --mv-space-1:  0.25rem;
  --mv-space-2:  0.5rem;
  --mv-space-3:  0.75rem;
  --mv-space-4:  1rem;
  --mv-space-5:  1.25rem;
  --mv-space-6:  1.5rem;
  --mv-space-8:  2rem;
  --mv-space-10: 2.5rem;
  --mv-space-12: 3rem;
  --mv-space-16: 4rem;
  --mv-space-20: 5rem;
  --mv-space-24: 6rem;
  --mv-space-32: 8rem;

  --mv-section-y: clamp(4rem, 2.5rem + 6.5vw, 7.5rem);
  --mv-gutter:    clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);
  --mv-container: 1440px;
  --mv-container-text: 720px;

  /* ── 5. Rayons — l'angle droit est absolu ────────────────────────────── */
  --mv-r-none: 0;
  --mv-r-xs:   0;
  --mv-r-sm:   0;
  --mv-r-md:   0;
  --mv-r-lg:   0;
  --mv-r-pill: 9999px; /* pastilles de compteur et boutons ronds uniquement  */
  --mv-r-full: 50%;

  /* ── 6. Élévation — le filet remplace l'ombre ────────────────────────── */
  --mv-hairline: 1px solid var(--mv-border-soft);
  --mv-shadow-none: none;
  --mv-shadow-xs: none;
  --mv-shadow-sm: none;
  /* Réservées aux couches qui flottent réellement au-dessus de la page */
  --mv-shadow-float: 0 18px 54px -28px rgba(0, 0, 0, .32);
  --mv-shadow-header: 0 1px 0 var(--mv-border-soft);
  --mv-ring: 0 0 0 1px var(--mv-border);

  /* ── 7. Motion ───────────────────────────────────────────────────────── */
  --mv-dur-instant: 90ms;
  --mv-dur-fast:    140ms;
  --mv-dur-base:    220ms;
  --mv-dur-slow:    380ms;
  --mv-dur-page:    600ms;

  --mv-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --mv-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --mv-ease-spring:cubic-bezier(.34, 1.56, .64, 1);   /* ajout panier only   */

  /* ── 8. Couches ──────────────────────────────────────────────────────── */
  --mv-z-base: 0;
  --mv-z-sticky: 100;
  --mv-z-header: 200;
  --mv-z-drawer: 300;
  --mv-z-modal: 400;
  --mv-z-toast: 500;

  /* ── 9. Formats média ────────────────────────────────────────────────── */
  --mv-ratio-product: 1 / 1;
  --mv-ratio-hero:    16 / 9;
  --mv-ratio-square:  1 / 1;
  --mv-ratio-editorial: 4 / 5;
}

/* ── Réductions de mouvement ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mv-dur-instant: 1ms; --mv-dur-fast: 1ms; --mv-dur-base: 1ms;
    --mv-dur-slow: 1ms;    --mv-dur-page: 1ms;
  }
}