/* 04-typography.css — Fonts, headings, text utilities */

/* ─── Typography ─── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--ivory-100);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a {
  color: var(--amber-400);
  text-decoration: none;
  transition: color var(--duration-normal) ease;
}

a:hover,
a:focus {
  color: var(--amber-300);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.container {
  max-width: 1140px;
}

/* ─── Text utilities (dark theme overrides) ─── */

.text-muted {
  color: var(--ivory-400) !important;
}

.text-dark {
  color: var(--ivory-200) !important;
}

.text-success {
  color: var(--sage-400) !important;
}

.text-danger {
  color: #d96c7b !important;
}

.text-warning {
  color: var(--amber-400) !important;
}

/* ─── Utility Classes ─── */

.text-ivory-200 { color: var(--ivory-200); }
.text-ivory-300 { color: var(--ivory-300); }
.text-ivory-400 { color: var(--ivory-400); }
.text-amber { color: var(--amber-400); }
.text-lead { font-size: 1.1rem; }
.line-height-relaxed { line-height: 1.7; }
.max-w-prose { max-width: 24rem; }

.footer-hr {
  border-color: var(--border-default);
}

.footer-brand-dot {
  color: var(--amber-400);
}

.footer-brand-ai {
  font-style: italic;
  color: var(--amber-400);
  font-weight: 400;
}

.footer-copyright {
  color: var(--ivory-400);
}

.wine-detail-lead {
  font-size: 1.1rem;
}