/*
 * EPOH Typography System — typography.css
 * Three-font system: Playfair Display (display) + Inter (body) + Cormorant Garamond (accent)
 * Source: EPOH_STYLE_ANCHOR.md §3
 *
 * Load order: 3rd (after variables.css)
 */


/* ============================================================
   BASE BODY TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-obsidian);
  letter-spacing: -0.01em;
}


/* ============================================================
   HEADING HIERARCHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}

/* Italic heading variant — sparingly for emphasis */
.heading-italic {
  font-style: italic;
}


/* ============================================================
   BODY TEXT
   ============================================================ */

p {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 70ch;
}

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

/* Large body — article text, long-form reading */
.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-loose);
}

/* Small — meta, captions */
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* Extra small — footnotes, legal */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
}

/* On-light-bg text override */
.on-light p,
.section--light p {
  color: var(--color-text-on-light);
}

.on-light .text-secondary,
.section--light .text-secondary {
  color: var(--color-text-muted-light);
}


/* ============================================================
   LINKS
   ============================================================ */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-subtle);
}

/* Inline content links */
.inline-link {
  color: var(--color-gold-light);
  border-bottom: 1px solid rgba(212, 174, 122, 0.35);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.inline-link:hover {
  color: var(--color-parchment);
  border-bottom-color: var(--color-parchment);
}

/* Inline links on light sections */
.section--light .inline-link {
  color: var(--color-ember);
  border-bottom-color: rgba(196, 98, 45, 0.4);
}

.section--light .inline-link:hover {
  color: #8A3A15;
  border-bottom-color: #8A3A15;
}


/* ============================================================
   EYEBROW / LABEL STYLES
   Phase labels, category markers, section eyebrows
   ============================================================ */

/* Primary eyebrow — ember, mono, all-caps */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-phase);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-4);
}

/* Gold eyebrow — Ayurvedic sections */
.eyebrow--gold {
  color: var(--color-gold);
}

/* Parchment eyebrow — subtle on very dark sections */
.eyebrow--muted {
  color: var(--color-text-secondary);
}


/* ============================================================
   PULL QUOTES / CORMORANT ACCENT TEXT
   The "repeatable core lines" from anchor docs
   ============================================================ */

.pull-quote {
  border-left: 3px solid var(--color-gold);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-12) 0;
  background: rgba(184, 147, 90, 0.05);
}

.pull-quote__text {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-gold-light);
  margin-bottom: 0;
  max-width: none;
}

/* Pull quote on light section */
.section--light .pull-quote {
  background: rgba(184, 147, 90, 0.08);
}

.section--light .pull-quote__text {
  color: #7A6030;
}


/* ============================================================
   AYURVEDIC CONCEPT LABELS
   e.g. [Ayurveda] Ama ≡ Inflammatory Toxin Load
   ============================================================ */

.ayurveda-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: rgba(184, 147, 90, 0.10);
  border: 1px solid rgba(184, 147, 90, 0.30);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: var(--space-4) 0;
}


/* ============================================================
   HURLEY STAGE BADGES
   ============================================================ */

.stage-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stage-badge--hurley-1 {
  background: rgba(74, 103, 65, 0.20);
  color: var(--color-sage-light);
  border: 1px solid rgba(74, 103, 65, 0.40);
}

.stage-badge--hurley-2 {
  background: rgba(184, 147, 90, 0.15);
  color: var(--color-gold-light);
  border: 1px solid rgba(184, 147, 90, 0.35);
}

.stage-badge--hurley-3 {
  background: rgba(196, 98, 45, 0.15);
  color: var(--color-ember-light);
  border: 1px solid rgba(196, 98, 45, 0.35);
}


/* ============================================================
   ARTICLE CONTENT TYPOGRAPHY
   Long-form reading experience
   ============================================================ */

.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--color-parchment);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-tight);
}

.article-content h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: var(--color-parchment);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.article-content p {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-loose);
  color: var(--color-text-secondary);
  max-width: 68ch;
  margin-bottom: var(--space-6);
}

.article-content strong {
  font-weight: var(--weight-semibold);
  color: var(--color-parchment);
}

.article-content em {
  font-style: italic;
  color: var(--color-gold-light);
}

/* Phase callout within article */
.article-content .phase-callout {
  border-left: 3px solid var(--color-ember);
  padding: var(--space-4) var(--space-6);
  background: var(--color-ember-muted);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-parchment);
  font-size: var(--font-size-body);
}

/* Article disclaimer */
.article-disclaimer {
  border-left: 3px solid var(--color-stone);
  padding: var(--space-4) var(--space-6);
  background: rgba(255, 255, 255, 0.03);
  margin-top: var(--space-12);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.article-disclaimer strong {
  color: var(--color-parchment);
  font-weight: var(--weight-semibold);
}


/* ============================================================
   LISTS — Content lists (not nav/reset)
   ============================================================ */

.content-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.content-list li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-4);
}

/* Positive list — sage check mark */
.content-list--positive li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-sage-light);
  font-weight: var(--weight-semibold);
}

/* Negative list — ember cross */
.content-list--negative li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--color-ember);
  font-weight: var(--weight-semibold);
}

/* Neutral list — gold dot */
.content-list--neutral li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--weight-medium);
}


/* ============================================================
   DIAGRAM CAPTIONS
   ============================================================ */

.diagram-caption {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-ash);
  text-align: center;
  margin-top: var(--space-4);
  font-style: italic;
}


/* ============================================================
   MISCELLANEOUS TEXT UTILITIES
   ============================================================ */

strong {
  font-weight: var(--weight-semibold);
}

em {
  font-style: italic;
}

.text-ember   { color: var(--color-ember); }
.text-gold    { color: var(--color-gold); }
.text-sage    { color: var(--color-sage-light); }
.text-muted   { color: var(--color-text-secondary); }
.text-center  { text-align: center; }
.text-upper   {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--font-size-small);
}


/* ============================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================================ */

@media (max-width: 767px) {
  .article-content p {
    font-size: var(--font-size-body);
    max-width: 100%;
  }

  .pull-quote {
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
  }

  .pull-quote__text {
    font-size: 1.25rem;
  }

  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
  }
}

@media (max-width: 479px) {
  .article-content h2 {
    margin-top: var(--space-12);
  }

  .article-content h3 {
    margin-top: var(--space-8);
  }
}