/* ═══════════════════════════════════════════════════════════════════════════
   VINTOLOGY — GLOBAL HEADING DESIGN SYSTEM
   Palette: #FFFFFF, #F7F7F5, #111111, #333333, #777777, #E6E6E3
   Display font: Montserrat, Body font: Inter
   Fluid typography via clamp() for responsive editorial hierarchy.

   Token convention — all colors resolve through ed-base.css palette
   (light/dark theme swap happens at the :root / [data-theme] layer).
     --text    → primary heading text       (#111 dark / #fff light)
     --text-2  → readable body copy         (#333 dark / #c9c9c6 light)
     --text-3  → muted labels, eyebrows     (#777)

   Usage convention — which class goes where:
     h1 / .ed-h1           → editorial page title (clamp, 800, uppercase)
     h2 / .ed-h2           → strong section heading
     h3 / .ed-h3           → product titles, collection cards, component titles
     .ed-eyebrow           → small uppercase label above a heading
     .ed-body / .ed-lede   → readable body copy / lede paragraph
     .ed-price             → distinct price display
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── fluid type scale (clamp for 16px ↔ 1240px viewport) ── */
  --ed-h1-size: clamp(2.2rem, 5.5vw, 4.5rem);
  --ed-h2-size: clamp(1.5rem, 3.5vw, 2.5rem);
  --ed-h3-size: clamp(1.15rem, 2.2vw, 1.5rem);
  --ed-eyebrow-size: 0.72rem;
  --ed-body-size: clamp(0.95rem, 1.2vw, 1.05rem);
  --ed-price-size: clamp(1.15rem, 2vw, 1.4rem);
  --ed-product-title-size: clamp(1rem, 1.5vw, 1.15rem);

  /* ── tracking ── */
  --ed-tracking-tight: -0.02em;
  --ed-tracking-eyebrow: 0.22em;

  /* ── weights ── */
  --ed-w-display: 800;
  --ed-w-bold: 700;
  --ed-w-semibold: 600;
  --ed-w-body: 400;

  /* ── line heights ── */
  --ed-lh-heading: 1.08;
  --ed-lh-body: 1.65;
  --ed-lh-product-title: 1.3;

  /* ── spacing ── */
  --ed-h1-mb: 1rem;
  --ed-h2-mb: 0.85rem;
  --ed-h3-mb: 0.5rem;
}

/* ── H1: editorial page title
   Large, bold display type via clamp(). Use on every top-level page. ── */
h1,
.ed-h1,
.lp-h1 {
  font-family: var(--font-display);
  font-size: var(--ed-h1-size);
  font-weight: var(--ed-w-display);
  letter-spacing: var(--ed-tracking-tight);
  line-height: var(--ed-lh-heading);
  color: var(--text);
  margin: 0 0 var(--ed-h1-mb);
}

/* ── H2: strong section headings ── */
h2,
.ed-h2,
.lp-h2 {
  font-family: var(--font-display);
  font-size: var(--ed-h2-size);
  font-weight: var(--ed-w-display);
  letter-spacing: var(--ed-tracking-tight);
  line-height: var(--ed-lh-heading);
  color: var(--text);
  margin: 0 0 var(--ed-h2-mb);
}

/* ── H3: product / collection / component titles ── */
h3,
.ed-h3 {
  font-family: var(--font-display);
  font-size: var(--ed-h3-size);
  font-weight: var(--ed-w-semibold);
  letter-spacing: -0.01em;
  line-height: var(--ed-lh-product-title);
  color: var(--text);
  margin: 0 0 var(--ed-h3-mb);
}

/* ── Eyebrow: small uppercase label above a heading ── */
.ed-eyebrow,
.lp-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ed-eyebrow-size);
  font-weight: var(--ed-w-bold);
  letter-spacing: var(--ed-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

/* ── Body: comfortable readable text ── */
.ed-body,
.ed-lede,
.lede {
  font-family: var(--font-body);
  font-size: var(--ed-body-size);
  font-weight: var(--ed-w-body);
  line-height: var(--ed-lh-body);
  color: var(--text-2);
  margin: 0 0 1rem;
}

/* ── Product title (standalone, when not in an h3 context) ── */
.ed-product-title {
  font-family: var(--font-display);
  font-size: var(--ed-product-title-size);
  font-weight: var(--ed-w-semibold);
  letter-spacing: -0.01em;
  line-height: var(--ed-lh-product-title);
  color: var(--text);
  margin: 0 0 0.35rem;
}

/* ── Price: visually distinct ── */
.ed-price {
  font-family: var(--font-display);
  font-size: var(--ed-price-size);
  font-weight: var(--ed-w-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

/* ── Strikethrough compare-at, paired with .ed-price ── */
.ed-price .ed-was {
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: var(--ed-w-body);
  color: var(--text-3);
  text-decoration: line-through;
  margin-left: 0.4rem;
}

/* ── Utility: legacy glow / gradient / text-shadow removal ── */
/* Override any text-shadow from legacy hero styles */
.hero-title,
.hero-lede,
.thr-hero__title,
.thr-hero__lede,
.lp-fullcat__label,
.lp-hero h1,
.lp-lede,
.home-hero h1,
.home-hero__lede,
.home-campaign h2,
.rw-index__name,
.rw-photo__ph,
.split-card h2,
.split-card p,
.lp-panel h2,
.lp-panel p {
  text-shadow: none !important;
}

/* Override gradient text effects */
.hero-title,
.thr-hero__title,
.lp-fullcat__label,
.lp-hero h1,
.lp-h1,
.home-hero h1,
.home-campaign h2,
.rw-index__name,
.thr-destination-cards h3,
.vendor-card h3,
.vendor-storefront-hero h1 {
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* Ensure no heavy gradients on heading containers */
.hero-copy,
.thr-hero__copy,
.lp-hero,
.home-hero__copy,
.home-campaign__copy,
.rw-hero__type {
  background: none !important;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  :root {
    --ed-h1-size: clamp(2rem, 8vw, 3.2rem);
    --ed-h2-size: clamp(1.4rem, 5vw, 2rem);
    --ed-eyebrow-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1, h2, h3, .ed-h1, .ed-h2, .ed-h3,
  .ed-eyebrow, .ed-body, .ed-price, .ed-product-title {
    transition: none !important;
    animation: none !important;
  }
}