/*
 * typography.css
 * Semantic type classes built entirely from tokens.css variables.
 * Apply these classes in templates and block templates — never set
 * raw font sizes inline.
 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap");


/* ─── Headings ──────────────────────────────────────────────────────────── */

.h1 {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight:    300;
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-dark);
}

.h2 {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight:    300;
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-dark);
}

.h3 {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    400;
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-dark);
}

.h4 {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight:    400;
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-dark);
}


/* ─── Body copy ─────────────────────────────────────────────────────────── */

.body-lg {
  font-family:    var(--font-sans);
  font-size:      var(--text-lg);
  font-weight:    300;
  line-height:    var(--leading-loose);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text);
}

.body-md {
  font-family:    var(--font-sans);
  font-size:      var(--text-base);
  font-weight:    300;
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text);
}

.body-sm {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    400;
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-text);
}


/* ─── Utility labels ────────────────────────────────────────────────────── */

.subtitle {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    500;
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
}

.caption {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    400;
  line-height:    var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-muted);
}


/* ─── Rich-text prose (editor output) ──────────────────────────────────── */

.prose {
  max-width: 68ch;
}

.prose h1 { @extend .h1; margin-bottom: var(--space-md); }
.prose h2 { @extend .h2; margin-bottom: var(--space-sm); }
.prose h3 { @extend .h3; margin-bottom: var(--space-sm); }

.prose p {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color:       var(--color-text);
  margin-bottom: var(--space-md);
}

.prose p:last-child { margin-bottom: 0; }

.prose a {
  color:           var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.prose a:hover { opacity: 0.7; }

.prose strong {
  font-weight: 600;
  color:       var(--color-dark);
}

.prose em {
  font-family: var(--font-serif);
  font-style:  italic;
}

.prose ul,
.prose ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.prose li {
  font-size:   var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color:       var(--color-text);
  margin-bottom: var(--space-xs);
}

.prose blockquote {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-family: var(--font-serif);
  font-size:   var(--text-xl);
  font-style:  italic;
  color:       var(--color-primary);
}