/* ============================================================
   TOKENS.CSS — Memi Abbigliamento
   Single source of truth for the design system.
   Link this BEFORE app.css and before each page's own <style>,
   then delete the duplicated :root block from every page.
   ============================================================ */

:root {
  /* ================================================================
     BRAND PALETTE — Memi Abbigliamento — STRICT 2-COLOR SYSTEM
     Viola #F1F0F8 · Verde Menta #D5E4C3 (+ neutrals only)
     Source of truth: client social graphics. The old third brand
     color (Rosa) has been removed; every accent must resolve to a
     tint/shade of one of these two hues.
     ================================================================ */

  /* --- Canonical brand tokens --- */
  /* Per client request (Lug 2026): ONE violet surface shade only.
     #C9C9E5 / #EDEDF7 / #F4F4FA were all unified to #F1F0F8.       */
  --brand-violet:      #F1F0F8;  /* Viola — the dominant brand color        */
  --brand-mint:        #D5E4C3;  /* Verde menta — the supporting brand color*/
  --brand-violet-dark: #6B6BA3;  /* Same hue, dark enough for text on white
                                    (4.9:1) and for white text on it (4.9:1)*/
  --brand-mint-dark:   #5F7A3F;  /* Same hue, text-safe (4.8:1 on white)    */
  /* Supporting same-hue steps (no new hues) */
  --brand-violet-light: #F1F0F8; /* hover surfaces, light section bg        */
  --brand-mint-light:   #EAF1E0; /* chip/pill backgrounds                   */
  --brand-violet-mid:   #8F8FC1; /* decorative strokes/icons (not text)     */
  --brand-mint-mid:     #9CB37F; /* decorative strokes/icons (not text)     */
  --brand-violet-deep:  #5C5C94; /* hover state of --brand-violet-dark      */

  /* --- Surfaces --- */
  --bg-base:        #FFFFFF;   /* Pure white canvas — no warm tint       */
  --bg-soft:        #F1F0F8;   /* Ultra-light viola tint — hover/subtle  */
  --bg-card:        #FFFFFF;   /* Product card surface                   */

  /* --- Legacy "Rosa" tokens — REMAPPED to Viola (rosa removed) --- */
  --blush:          var(--brand-violet);       /* announcement bars     */
  --blush-light:    var(--brand-violet-light); /* announcement bar bg   */
  --blush-dark:     var(--brand-violet-dark);  /* badge / cart dot / CTA*/

  /* --- Bianco Caldo (Soft Off-White) — #F7F5F0 --- */
  --cream:          #F7F5F0;   /* Bianco Caldo — logo contrast, overlays */
  --cream-dark:     #E9E9F3;   /* Viola-tinted cool divider              */

  /* --- Verde Menta (Supporting) — #D5E4C3 --- */
  --sage:           var(--brand-mint);       /* tags, pills              */
  --sage-light:     var(--brand-mint-light); /* chip backgrounds         */
  --sage-dark:      var(--brand-mint-dark);  /* icon strokes, trust strip*/

  /* --- Viola (Dominant) — #F1F0F8 --- */
  --lavender:       var(--brand-violet);       /* hero bg, marquee       */
  --lavender-light: var(--brand-violet-light); /* hover surfaces         */

  /* --- Cool-toned Borders / Dividers (viola-tinted neutrals) --- */
  --beige:          #DBDBEE;   /* Cool viola-tinted border               */
  --beige-dark:     #BEBEDD;   /* Slightly deeper viola border           */

  /* --- Typography (unchanged — works over all pastels) --- */
  --espresso:       #3B2B2B;   /* Rich dark — primary body text          */
  --ink:            #2F3438;   /* Charcoal — editorial headings          */
  --brown-mid:      #6B5050;   /* Secondary text                         */
  --brown-light:    #9E8A8A;   /* Placeholder / meta                     */
  --white:          #FFFFFF;   /* Pure white                             */

  /* --- Typography --- */
  --font-serif:     'Cormorant Garamond', Georgia, serif;
  --font-sans:      'DM Sans', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* New: fluid hero size — replaces fixed --text-4xl on .hero-title */
  --text-hero: clamp(2.25rem, 4vw + 1.5rem, 4.75rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  /* --- Spacing (8-pt scale) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Radii --- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* --- Shadows (cool-toned viola base) --- */
  --shadow-xs:  0 1px 3px rgba(48,40,70,.06);
  --shadow-sm:  0 2px 8px rgba(48,40,70,.08);
  --shadow-md:  0 4px 20px rgba(48,40,70,.10);
  --shadow-lg:  0 8px 40px rgba(48,40,70,.12);
  --shadow-card-hover: 0 12px 40px rgba(48,40,70,.14);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med:  300ms;

  /* New: motion tokens for the micro-interaction upgrades */
  --dur-slow:    650ms;
  --ease-magnet: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Legacy aliases ---
     404.html / privacy.html / returns.html / order-confirm.html used to
     run their own drifted palette with these token names. Mapped onto
     the canonical tokens above so those pages render the same palette
     as the rest of the site without any var() reference breaking. */
  --border:         var(--beige);
  --cream-warm:     var(--bg-soft);
  --espresso-light: var(--brown-mid);
  --text-body:      var(--brown-mid);
  --text-muted:     var(--brown-light);
  --blush-mid:      var(--blush);
  --lavender-dark:  var(--brand-violet-dark);
}

/* ============================================================
   Placeholder helpers — kept here so every page shares one
   definition instead of redefining .ph-* per file.
   ============================================================ */
.ph-blush    { background: #F1F0F8; }  /* Remapped → Viola (single shade, flat) */
.ph-sage     { background: linear-gradient(145deg, #EAF1E0, #D5E4C3); }  /* Verde menta */
.ph-lavender { background: #F1F0F8; }  /* Viola (single shade, flat) */
.ph-cream    { background: linear-gradient(145deg, #F7F5F0, #E9E9F3); }  /* Bianco Caldo → cool */
.ph-peach    { background: #F1F0F8; }  /* Remapped → Viola (single shade, flat) */
.ph-mint     { background: linear-gradient(145deg, #EAF1E0, #D5E4C3); }  /* Remapped → Verde menta */

/* Ghost-mannequin tier: flat, neutral, no gradient */
.ph-flat        { background: var(--bg-soft); }
.ph-shimmer     { position: relative; overflow: hidden; background: var(--bg-soft); }
.ph-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmerSweep 2.2s ease-in-out infinite;
}
@keyframes shimmerSweep { from { background-position: 200% 0; } to { background-position: -50% 0; } }