/* ==========================================================================
 * app/design-src/tokens.css — source de verite des tokens visuels GLOBAUX
 *
 * Lot 7 — Homepage design saisons. Toutes les valeurs visuelles utilisees
 * dans le site doivent etre referencees ici (couleurs permanentes,
 * typographie, espacements, ombres, animations, breakpoints, z-index).
 *
 * Les variantes saisonnieres surchargent uniquement les `--season-*` tokens
 * via les fichiers `seasons/{spring,summer,autumn,winter}.css`.
 *
 * Source de specifications : _dev/project-specifications/project-human-briefing/
 * univers-graphique-website.md sections 2 a 14.
 * ========================================================================== */

:root {
  /* === 1. COULEURS PERMANENTES (univers §2.1) =========================== */
  --color-bg:                #F4EBDC;            /* creme ivoire chaud */
  --color-bg-secondary:      #EFE3D1;            /* creme dense */
  --color-ink:               #241B16;            /* brun-noir chaud (texte) */
  --color-ink-soft:          #5A4D44;            /* taupe doux — contraste AA 4.5:1 sur --color-bg */
  --color-cherry:            #9A3043;            /* rouge cerise permanent */
  --color-cherry-soft:       #C73E54;            /* rouge erreur formulaire */
  --color-branch:            #2B160E;            /* brun chocolat laque */
  --color-branch-highlight:  #8A5B36;            /* reflet caramel */
  --color-line:              rgba(36,27,22,0.22);
  --color-line-strong:       rgba(36,27,22,0.42);
  --fade-rule-bg:            linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--season-accent) 35%, var(--color-line)) 18%,
    color-mix(in srgb, var(--season-accent) 35%, var(--color-line)) 82%,
    transparent
  );
  --color-shadow:            rgba(36,27,22,0.18);

  /* === 2. PALETTE SAISON (defaut printemps, surchargee par seasons/*) === */
  --season-bg:               #FBF7F5;
  --season-bg-secondary:     #F7F1EE;
  --season-bg-light:         var(--season-bg);
  --season-bg-dark:          #EBDCD6;
  --season-accent:           #B87385;            /* rose poudre */
  --season-accent-soft:      #F0E2DF;            /* rose petale pale */
  --season-foliage:          #A8B896;            /* vert tendre */
  --season-bokeh:            radial-gradient(ellipse 90% 70% at 42% 38%, rgba(251, 247, 245, 0.9) 0%, transparent 52%),
                              radial-gradient(ellipse 60% 50% at 78% 68%, rgba(240, 226, 223, 0.32) 0%, transparent 58%);
  --season-glow:             rgba(240, 226, 223, 0.22);
  --season-nav-submenu-bg:   color-mix(in srgb, var(--season-bg-secondary) 94%, #fff 6%);
  --season-nav-submenu-border: color-mix(in srgb, var(--season-accent) 14%, transparent);
  --season-nav-submenu-hover: color-mix(in srgb, var(--season-accent) 10%, transparent);
  --season-burger-overlay-bg: var(--color-ink);

  /* === 3. TYPOGRAPHIE (univers §5) ====================================== */
  /* Stack auto-hebergee + fallback systeme tres fidele */
  --font-serif:    var(--font-content);
  --font-sans:     "Jost", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-script:   "Parisienne", "Petit Formal Script", "Allura", cursive;
  --font-content:  "Kurale", Georgia, serif;
  --font-product-title: "Great Vibes", "Parisienne", cursive;
  --font-brand-serif: var(--font-content);
  --font-brand-script: "Parisienne", cursive;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  --lh-tight:      1.15;
  --lh-snug:       1.35;
  --lh-normal:     1.7;
  --lh-relaxed:    1.85;

  /* --- Echelle typographique (base 16px, ratio ~1.2 mobile / 1.25 desktop) ---
   * Hiérarchie : hero > h1 display > h2 > h3 > h4 > titre produit > accordéon > lead > body > small > label
   * Règle : 5–7 tailles fluides max ; pas de px isolés dans les composants. */
  --type-scale-2xs: 0.75rem;       /* 12px — labels, mono */
  --type-scale-xs:  0.875rem;      /* 14px — captions, small */
  --type-scale-sm:  0.9375rem;     /* 15px — UI secondaire */
  --type-scale-md:  1rem;          /* 16px — body mobile */
  --type-scale-md-plus: 1.0625rem; /* 17px — body desktop */
  --type-scale-lg:  1.125rem;      /* 18px — lead / intro */
  --type-scale-xl:  1.25rem;       /* 20px — accordéons, h4 */
  --type-scale-2xl: 1.5rem;        /* 24px — h3 */

  /* Aliases sémantiques (mobile-first, clamp fluide) */
  --type-body: clamp(var(--type-scale-md), 0.15vw + 0.97rem, var(--type-scale-md-plus));
  --type-lead: clamp(var(--type-scale-md), 0.35vw + 0.94rem, var(--type-scale-lg));
  --type-small: var(--type-scale-xs);
  --type-caption: var(--type-scale-2xs);
  --type-label: var(--type-scale-2xs);
  --type-ui: clamp(0.8125rem, 0.1vw + 0.79rem, var(--type-scale-sm));
  --type-accordion-title: clamp(1.0625rem, 0.5vw + 0.96rem, 1.25rem);
  --type-content-body: clamp(1rem, 0.25vw + 0.94rem, 1.0625rem);
  --type-product-title: 1.5em;
  --type-display-title-font-family: var(--font-product-title);
  --type-display-title-font-size: clamp(2.125rem, 6.5vw + 0.5rem, 2.625rem);
  --type-display-title-font-weight: 400;
  --type-display-title-line-height: 1.12;
  --type-editorial-font-family: var(--font-content);
  --type-editorial-font-size: var(--type-content-body);
  --type-editorial-font-weight: var(--fw-light);
  --type-editorial-line-height: var(--lh-relaxed);
  --type-editorial-color: var(--color-ink-soft);
  --type-heading-font-family: var(--font-content);
  --type-price: clamp(1.125rem, 0.65vw + 0.92rem, 1.375rem);
  --type-section-title: clamp(1.5rem, 1.6vw + 0.75rem, 2rem);
  --type-link-text: var(--type-lead);

  /* Titres in-page (h2–h4) — toujours sous le h1 display (clamp mobile / 2.5em desktop) */
  --type-inpage-h2-size: clamp(1.25rem, 1.8vw + 0.65rem, 1.75rem);
  --type-inpage-h3-size: clamp(1.125rem, 1vw + 0.8rem, 1.375rem);
  --type-inpage-h4-size: clamp(1rem, 0.4vw + 0.88rem, 1.125rem);

  /* Echelle marketing / hero (homepage, pages éditoriales) */
  --fs-hero:       clamp(3.5rem, 10vw, 7.5rem);
  --fs-h1:         clamp(2.5rem, 5.6vw, 4rem);
  --fs-h2:         clamp(2rem, 4.4vw, 3rem);
  --fs-h3:         clamp(1.5rem, 3.2vw, 2rem);
  --fs-subtitle:   clamp(1.25rem, 2vw, 1.75rem);
  --fs-signature:  clamp(1.625rem, 2.4vw, 2rem);

  /* Rétrocompatibilité (préférer --type-* dans le nouveau code) */
  --fs-body:       var(--type-scale-md-plus);
  --fs-body-mobile: var(--type-scale-md);
  --fs-small:      var(--type-small);
  --fs-eyebrow:    var(--type-label);
  --fs-mono:       var(--type-label);
  --section-title-size: var(--type-section-title);
  --section-lede-size: var(--type-lead);

  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;
  --tracking-widest:   0.2em;

  /* === 4. ESPACEMENTS (rythme vertical 8 base + grandes generosites) === */
  --space-2xs:     4px;
  --space-xs:      8px;
  --space-sm:      12px;
  --space-md:      24px;
  --space-lg:      40px;
  --space-xl:      64px;
  --space-2xl:     96px;
  --space-3xl:     144px;
  --space-4xl:     200px;
  --footer-legal-inset: 10px;

  /* Shell pages contenu CMS (mobile-first) */
  --cms-page-shell-pad-top: clamp(12px, 2.5vw, 20px);
  --cms-page-shell-pad-inline: clamp(16px, 4vw, 48px);
  --cms-page-shell-pad-bottom: var(--space-2xl);

  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-boutique-media: 25px;
  --radius-pill:   999px;

  /* === 5. CONTAINERS / BREAKPOINTS ====================================== */
  --container-max:      1280px;
  --container-prose:    640px;
  --container-narrow:   860px;

  /* Breakpoints (utilisables en JS via getComputedStyle, en CSS via @media)*/
  --bp-sm:         480px;
  --bp-md:         768px;
  --bp-lg:         1024px;
  --bp-xl:         1280px;

  /* Header homepage (maquette 1.x) — clearance hero decor */
  --header-height-home: 88px;
  /* Hauteur additionnelle quand la signature script du logo est révélée */
  --header-byline-extra: 24px;
  /* Logo mobile compact — reserve horizontale pour les icones header (burger seul → compte+panier+burger) */
  --site-header-actions-reserve-burger: 52px;
  --site-header-actions-reserve-cart: 96px;
  --site-header-actions-reserve-account-cart: 116px;

  /* === 6. OMBRES (douces, jamais marquees) ============================== */
  --shadow-soft:        0 1px 2px rgba(36,27,22,0.05), 0 8px 24px rgba(36,27,22,0.08);
  --shadow-card-hover:  0 2px 6px rgba(36,27,22,0.07), 0 18px 48px rgba(36,27,22,0.12);
  --shadow-branch:      0 12px 24px rgba(36,27,22,0.14);
  --shadow-pop:         0 4px 12px rgba(36,27,22,0.10), 0 24px 60px rgba(36,27,22,0.18);
  --site-header-stuck-shadow:
    0 1px 0 rgba(36, 27, 22, 0.05),
    0 8px 18px -6px rgba(36, 27, 22, 0.10);

  /* === 7. ANIMATIONS (univers §9-§13) =================================== */
  --easing-smooth:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-organic:   cubic-bezier(0.45, 0.05, 0.30, 1);
  --easing-season-ambient: cubic-bezier(0.35, 0.08, 0.25, 1);
  --easing-emphasis:  cubic-bezier(0.16, 1, 0.30, 1);

  --motion-fast:      180ms;
  --motion-base:      250ms;
  --motion-slow:      450ms;
  --motion-slower:    700ms;
  --motion-arrival:   1000ms;
  --motion-transition-season: 1200ms;
  --motion-season-slide: 1200ms;
  --motion-season-ambient: 800ms;
  --motion-season-ambient-linear: 500ms;
  --motion-hero-content-fade-out: 400ms;
  --motion-hero-content-fade-in: 960ms;

  /* Particules tombantes hero (frequence ×1.15 = +15 % d apparitions) */
  --hero-falling-frequency: 1.15;
  --hero-falling-petal-count: 4;
  --hero-falling-leaf-count: 4;
  --hero-falling-flake-count: 3;

  /* === 8. Z-INDEX layered =============================================== */
  --z-bg-bokeh:       0;
  --z-bg-branch:      1;
  --z-content:        2;
  --z-content-front:  3;
  --z-particles:      4;
  --z-season-rail:    20;
  --z-season-rail-transition: 45;
  --z-header:         30;
  /* Reserve fixe rail saisons (homepage mobile, hors hero) — plein cadran par defaut */
  --home-season-rail-reserve-mobile: clamp(20px, 7vw, 72px);
  --home-season-rail-reserve-mobile-compact: clamp(20px, 6.5vw, 64px);
  /* Axe droit partagé panier/burger header + season-rail (bord viewport) */
  --home-rail-axis-inset: clamp(6px, 0.75vw, 12px);
  --z-burger-overlay: 40;
  --z-modal:          50;
  --z-toast:          60;
}

@media (min-width: 1024px) {
  :root {
    --home-rail-axis-inset: clamp(21px, 0.75vw, 33px);
  }
}

/* ==========================================================================
 * RESET MINIMAL + BASE
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-content);
  font-weight: var(--fw-regular);
  font-size: var(--type-content-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
  background: var(--season-bg);
  background-image: var(--season-bokeh);
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--motion-season-slide) var(--easing-smooth);
}

@media (min-width: 768px) {
  :root {
    --type-content-body: clamp(1.0625rem, 0.35vw + 1rem, 1.1rem);
    --cms-page-shell-pad-top: var(--space-lg);
  }

  body {
    font-size: var(--type-content-body);
    background-attachment: fixed;
  }
}

@media (min-width: 1024px) {
  :root {
    --type-display-title-font-size: 2.5em;
    --type-display-title-line-height: var(--lh-snug);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--type-heading-font-family);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-family: var(--type-display-title-font-family);
  font-size: var(--type-display-title-font-size);
  font-weight: var(--type-display-title-font-weight);
  line-height: var(--type-display-title-line-height);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--type-inpage-h2-size);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--type-inpage-h3-size);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--type-inpage-h4-size);
  margin-bottom: var(--space-xs);
}

h5,
h6 {
  font-size: var(--type-lead);
  margin-bottom: var(--space-xs);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

::selection {
  background: var(--color-cherry);
  color: var(--color-bg);
}

/* Focus visible : encadre fin accent cerise */
:focus-visible {
  outline: 2px solid var(--color-cherry);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
 * UTILITAIRES TYPOGRAPHIQUES (univers §5.5)
 * ========================================================================== */

/* .eyebrow — voir typography.css (rôles partagés) */
.eyebrow {
  margin: 0;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-cherry);
}

.script {
  font-family: var(--font-script);
  font-size: var(--fs-signature);
  color: var(--color-cherry);
  font-weight: var(--fw-regular);
}

/* Underline cerise dessine de gauche a droite au hover */
.link-underline {
  position: relative;
  display: inline-block;
  color: var(--color-ink);
  transition: color var(--motion-fast) var(--easing-smooth);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--color-cherry);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--easing-smooth);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion (univers §9.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    scroll-behavior: auto !important;
  }
}