/* ==========================================================================
   DA'CLUB — Design tokens
   Direction : « Galerie & geste » — la rigueur d'une galerie (blanc, os, encre,
   filets fins, beaucoup d'air) et le geste de la rue (Anton monumental,
   annotations au marqueur, fleur dessinée à la main).
   Ces variables sont pensées pour être mappées 1:1 sur settings_schema.json
   d'un thème Shopify 2.0.
   ========================================================================== */

:root {
  /* ---- Couleurs — monochrome sobre : blanc, noirs et gris neutres.
     (les noms de variables historiques sont conservés pour la compatibilité) */
  --c-ink: #121212;          /* noir — texte, boutons */
  --c-night: #0c0c0c;        /* noir profond — footer */
  --c-espresso: #1b1b1b;     /* anthracite — bande de réassurance */
  --c-grenat: #1f1f1f;       /* graphite — sections « temps fort » */
  --c-grenat-deep: #141414;
  --c-brass: #8a8a8a;        /* gris moyen — filets, numéros, détails */
  --c-brass-light: #c4c4c4;  /* gris clair — détails sur fond sombre */
  --c-paper: #ffffff;        /* blanc */
  --c-bone: #f4f4f2;         /* gris très clair — hero, vignettes produits */
  --c-sand: #ebebe8;         /* gris perle — sections alternées */
  --c-stone: #dcdcd8;
  --c-ivory: #f5f5f3;        /* texte sur fonds sombres */
  --c-grey: #b2b2b2;
  --c-mute: #6b6b6b;
  --c-line: rgba(18, 18, 18, .12);
  --c-line-strong: rgba(18, 18, 18, .26);
  --c-line-inv: rgba(245, 245, 243, .14);
  --c-alert: #8e2a26;
  --c-ok: #2e6e57;

  /* ---- Arrondis : très légers, pour adoucir sans perdre la rigueur */
  --r-btn: 4px;
  --r-media: 6px;

  /* Grain argentique pour les fonds sombres */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Typographies */
  --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;   /* serif de mode, haut contraste */
  --f-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label: "Archivo", "DM Sans", system-ui, sans-serif;
  --f-hand: "Instrument Serif", Georgia, serif;   /* annotations : serif italique */

  /* Échelle fluide (min → max entre 375px et 1600px) */
  --fs-mega: clamp(3.4rem, 1.8rem + 6.2vw, 8.75rem);
  --fs-h1: clamp(3rem, 1.9rem + 5.2vw, 7.5rem);
  --fs-h2: clamp(2.4rem, 1.6rem + 3vw, 5rem);
  --fs-h3: clamp(1.7rem, 1.35rem + 1.3vw, 2.6rem);
  --fs-lead: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .6875rem;      /* 11px — micro-typo capitales */

  --lh-tight: .94;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --ls-label: .16em;

  /* ---- Espacements (base 4) */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(4rem, 2.4rem + 4.6vw, 7.5rem);
  --gutter: clamp(1rem, .6rem + 1.6vw, 2rem);
  --page-x: clamp(1rem, .4rem + 3vw, 3.5rem);
  --page-max: 1680px;

  /* ---- Formes */
  --r-0: 0;
  --r-1: 2px;
  --r-pill: 999px;

  /* ---- Mouvement */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* expo out — révélations */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --t-fast: .2s;
  --t-base: .45s;
  --t-slow: .9s;
  --t-xslow: 1.4s;

  /* ---- Élévation */
  --shadow-panel: 0 30px 80px -20px rgba(15, 15, 15, .25);
  --overlay: rgba(12, 12, 12, .45);

  /* ---- Composants */
  --header-h: 72px;
  --announce-h: 36px;
  --drawer-w: min(460px, 100vw);
  --z-header: 50;
  --z-mega: 45;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-toast: 100;
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
    --announce-h: 34px;
  }
}