/* ============================================================
   TWEET — Typography System
   ============================================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Base Typography ── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
}

/* ── Display / Heading Styles ── */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display-3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.heading-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.heading-3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.heading-4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.heading-5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.heading-6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

/* ── Overline / Label ── */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-luxury);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ── Body Text ── */
.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-gray-500);
}

/* ── Price Typography ── */
.price {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.price-original {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-gray-400);
  text-decoration: line-through;
}

.price-sale {
  color: var(--color-error);
}

.price-currency {
  font-size: 0.8em;
  font-weight: var(--weight-medium);
  vertical-align: super;
}

/* ── Section Heading Pattern ── */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-heading .overline {
  display: block;
  margin-bottom: var(--space-3);
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section-heading p {
  font-size: var(--text-md);
  color: var(--color-gray-600);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* ── Decorative Text ── */
.text-gradient {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-italic {
  font-style: italic;
  font-family: var(--font-display);
}