/* ============================================================
   ToneThread Blog — post-import.css
   Vocabulary stylesheet for imported HTML posts (themed-inline mode).

   Authors of uploaded .html files use these classes (`tt-lede`,
   `tt-pull`, `tt-callout`, `tt-figure`, `tt-divider`, and the
   `tt-tone-*` accent set) to opt in to layout and colour that adapts
   to ToneThread's light + bark themes automatically.

   See docs/imported-html.md for the full contract.
   ============================================================ */

/* ── Tone tokens — light mode (default) ───────────────────── */
.imported-html.themed-inline {
  --tt-warmth:    #c4376a;
  --tt-certainty: #6b21a8;
  --tt-intensity: #b45309;
  --tt-coherence: #047857;
  --tt-resonance: #0e7490;

  --tt-callout-bg:    rgba(0, 0, 0, 0.03);
  --tt-callout-text:  inherit;
  --tt-rule:          rgba(0, 0, 0, 0.12);
  --tt-pull-italic:   #3b2e1f;
  --tt-fig-bg:        rgba(0, 0, 0, 0.04);
}

/* ── Tone tokens — bark mode ──────────────────────────────── */
[data-mode="bark"] .imported-html.themed-inline {
  --tt-warmth:    #f472b6;
  --tt-certainty: #c4b5fd;
  --tt-intensity: #fbbf24;
  --tt-coherence: #6ee7b7;
  --tt-resonance: #67e8f9;

  --tt-callout-bg:    rgba(255, 255, 255, 0.04);
  --tt-callout-text:  #e2ddd5;
  --tt-rule:          rgba(255, 255, 255, 0.14);
  --tt-pull-italic:   #f5f2ec;
  --tt-fig-bg:        rgba(255, 255, 255, 0.04);
}

/* ── Container reset — let blog typography flow through ───── */
.imported-html.themed-inline {
  font-family: inherit;
  color: inherit;
  line-height: 1.6;
}
.imported-html.themed-inline p,
.imported-html.themed-inline li {
  font-family: inherit;
  color: inherit;
}

/* ── Block rhythm — paragraphs and friends at any depth ──────
   `.post-content > * + *` (in post-theme.css) only reaches direct
   children of `.post-content`. For themed-inline imports the body
   sits two levels deeper (`.imported-html.themed-inline > article >
   p`), so without this rule paragraphs collapse to UA defaults that
   are tighter than the in-paragraph line-height. The result reads
   as one wall of text. Restore a clear blank-line gap *between*
   blocks while keeping line-height *within* a paragraph normal. */
.imported-html.themed-inline p,
.imported-html.themed-inline ul,
.imported-html.themed-inline ol,
.imported-html.themed-inline blockquote,
.imported-html.themed-inline figure {
  margin: 0 0 1.25em;
}
.imported-html.themed-inline > :last-child,
.imported-html.themed-inline article > :last-child,
.imported-html.themed-inline p:last-child,
.imported-html.themed-inline ul:last-child,
.imported-html.themed-inline ol:last-child,
.imported-html.themed-inline blockquote:last-child,
.imported-html.themed-inline figure:last-child {
  margin-bottom: 0;
}

/* ── Heading rhythm — give sections breathing room ───────────
   Mirrors the markdown-side spacing in post-theme.css so themed-inline
   sections feel paced, not crammed against the paragraph above. */
.imported-html.themed-inline h1 { margin: 0 0 1rem; }
.imported-html.themed-inline h2 { margin: 2.4rem 0 0.7rem; }
.imported-html.themed-inline h3 { margin: 1.8rem 0 0.55rem; }
.imported-html.themed-inline h4 { margin: 1.6rem 0 0.45rem; }
.imported-html.themed-inline > :first-child,
.imported-html.themed-inline article > :first-child,
.imported-html.themed-inline h1:first-child,
.imported-html.themed-inline h2:first-child,
.imported-html.themed-inline h3:first-child,
.imported-html.themed-inline h4:first-child {
  margin-top: 0;
}
.imported-html.themed-inline a {
  color: var(--tt-resonance);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.imported-html.themed-inline a:hover { color: var(--tt-warmth); }

.imported-html.themed-inline img,
.imported-html.themed-inline video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── tt-lede — opening paragraph ──────────────────────────── */
.imported-html.themed-inline .tt-lede,
.imported-html.themed-inline .tt-lede p:first-child {
  font-size: 1.18em;
  line-height: 1.65;
  letter-spacing: 0.005em;
  margin-bottom: 1.4em;
}

/* ── tt-pull — large pulled quote ─────────────────────────── */
.imported-html.themed-inline .tt-pull {
  margin: 2em 0;
  padding: 0.4em 0 0.4em 1.2em;
  border-left: 3px solid var(--tt-rule);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.45em;
  line-height: 1.4;
  color: var(--tt-pull-italic);
}
.imported-html.themed-inline .tt-pull.tt-tone-warmth    { border-left-color: var(--tt-warmth); }
.imported-html.themed-inline .tt-pull.tt-tone-certainty { border-left-color: var(--tt-certainty); }
.imported-html.themed-inline .tt-pull.tt-tone-intensity { border-left-color: var(--tt-intensity); }
.imported-html.themed-inline .tt-pull.tt-tone-coherence { border-left-color: var(--tt-coherence); }
.imported-html.themed-inline .tt-pull.tt-tone-resonance { border-left-color: var(--tt-resonance); }

/* ── tt-callout — boxed aside ─────────────────────────────── */
.imported-html.themed-inline .tt-callout {
  margin: 1.6em 0;
  padding: 1em 1.2em;
  background: var(--tt-callout-bg);
  border-left: 3px solid var(--tt-rule);
  border-radius: 3px;
  color: var(--tt-callout-text);
}
.imported-html.themed-inline .tt-callout.tt-tone-warmth    { border-left-color: var(--tt-warmth); }
.imported-html.themed-inline .tt-callout.tt-tone-certainty { border-left-color: var(--tt-certainty); }
.imported-html.themed-inline .tt-callout.tt-tone-intensity { border-left-color: var(--tt-intensity); }
.imported-html.themed-inline .tt-callout.tt-tone-coherence { border-left-color: var(--tt-coherence); }
.imported-html.themed-inline .tt-callout.tt-tone-resonance { border-left-color: var(--tt-resonance); }
.imported-html.themed-inline .tt-callout > :first-child { margin-top: 0; }
.imported-html.themed-inline .tt-callout > :last-child  { margin-bottom: 0; }

/* ── tt-figure — image + caption ──────────────────────────── */
.imported-html.themed-inline .tt-figure {
  margin: 2em 0;
  padding: 0.6em;
  background: var(--tt-fig-bg);
  border-radius: 3px;
  text-align: center;
}
.imported-html.themed-inline .tt-figure img {
  margin: 0 auto;
  border-radius: 2px;
}
.imported-html.themed-inline .tt-figure figcaption {
  margin-top: 0.6em;
  font-family: 'DM Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-pull-italic);
  opacity: 0.75;
}

/* ── tt-divider — section break with brand mark ──────────── */
.imported-html.themed-inline .tt-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin: 2.4em 0;
  color: var(--tt-rule);
  font-family: 'DM Mono', monospace;
  font-size: 0.7em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.imported-html.themed-inline .tt-divider::before,
.imported-html.themed-inline .tt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tt-rule);
}
.imported-html.themed-inline .tt-divider:empty::before,
.imported-html.themed-inline .tt-divider:empty::after { max-width: 60px; }

/* ── tt-tone-* on plain text — accent colour without box ── */
.imported-html.themed-inline .tt-tone-warmth    { color: var(--tt-warmth); }
.imported-html.themed-inline .tt-tone-certainty { color: var(--tt-certainty); }
.imported-html.themed-inline .tt-tone-intensity { color: var(--tt-intensity); }
.imported-html.themed-inline .tt-tone-coherence { color: var(--tt-coherence); }
.imported-html.themed-inline .tt-tone-resonance { color: var(--tt-resonance); }
/* …but the box variants above re-establish their own text colour. */
.imported-html.themed-inline .tt-callout.tt-tone-warmth,
.imported-html.themed-inline .tt-callout.tt-tone-certainty,
.imported-html.themed-inline .tt-callout.tt-tone-intensity,
.imported-html.themed-inline .tt-callout.tt-tone-coherence,
.imported-html.themed-inline .tt-callout.tt-tone-resonance,
.imported-html.themed-inline .tt-pull.tt-tone-warmth,
.imported-html.themed-inline .tt-pull.tt-tone-certainty,
.imported-html.themed-inline .tt-pull.tt-tone-intensity,
.imported-html.themed-inline .tt-pull.tt-tone-coherence,
.imported-html.themed-inline .tt-pull.tt-tone-resonance {
  color: var(--tt-callout-text);
}