/* ============================================================
   css/base/typography.css
   Zolto v8.1.0 — Typography System
   ============================================================
   Purpose:
   - Set the application-level font stack on body
   - Define heading, paragraph, list, link, and code styles
     for RENDERED Zolto content (inside .zolto-preview)
   - Define UI typography for chrome elements (topbar, sidebar,
     buttons, labels, tooltips)
   - All values via CSS custom properties from variables.css
   - No layout here — only font, size, weight, line-height,
     colour, spacing between text elements
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Application Base
   ───────────────────────────────────────────────────────────── */

html {
  font-family: var(--font-sans);
  font-size:   16px;
  line-height: var(--leading-normal);
  color:       var(--text-main);
}

body {
  font-family:             var(--font-sans);
  font-size:               var(--text-base);
  font-weight:             var(--weight-normal);
  line-height:             var(--leading-relaxed);
  color:                   var(--text-main);
  background-color:        var(--bg-app);
  font-feature-settings:   "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures:  contextual;
  hanging-punctuation:     first last;
}


/* ─────────────────────────────────────────────────────────────
   2. UI Typography (chrome, not prose)
      Used in topbar, sidebar, toolbar, buttons, labels
   ───────────────────────────────────────────────────────────── */

/* Base label size for all UI chrome */
.zolto-label {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  line-height:    var(--leading-tight);
  color:          var(--text-mute);
  letter-spacing: var(--tracking-wide);
}

/* Caption text (file names, status indicators, timestamps) */
.zolto-caption {
  font-size:   var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color:       var(--text-faint);
}

/* Keyboard shortcut hints */
kbd {
  font-family:      var(--font-mono);
  font-size:        0.75em;
  font-weight:      var(--weight-medium);
  line-height:      1;
  color:            var(--text-mute);
  background:       var(--bg-surface);
  border:           1px solid var(--border-normal);
  border-radius:    var(--radius-sm);
  padding:          0.15em 0.4em;
  white-space:      nowrap;
}

/* Version badge */
.zolto-version-badge {
  font-family:      var(--font-mono);
  font-size:        var(--text-xs);
  font-weight:      var(--weight-medium);
  color:            var(--text-faint);
  background:       var(--bg-surface);
  border:           1px solid var(--border-subtle);
  border-radius:    var(--radius-full);
  padding:          0.1em 0.5em;
  vertical-align:   middle;
  letter-spacing:   var(--tracking-wider);
}

/* Wordmark */
.zolto-wordmark-text {
  font-family:      var(--font-display);
  font-size:        1.25rem;
  font-weight:      var(--weight-normal);
  font-style:       italic;
  letter-spacing:   var(--tracking-snug);
  color:            var(--topbar-wordmark-text);
  line-height:      1;
}


/* ─────────────────────────────────────────────────────────────
   3. Rendered Document — Prose Typography
      All selectors scoped to .zolto-preview to avoid
      polluting application chrome
   ───────────────────────────────────────────────────────────── */

.zolto-preview {
  font-family:   var(--font-sans);
  font-size:     var(--prose-size);
  line-height:   var(--prose-leading);
  color:         var(--preview-text);
  max-width:     var(--preview-max-width);
  margin-inline: auto;
}


/* ── Headings ── */

.zolto-preview .zolto-heading {
  font-family:    var(--font-sans);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-tight);
  color:          var(--preview-heading);
  letter-spacing: var(--tracking-snug);
  margin-top:     var(--space-8);
  margin-bottom:  var(--space-3);
  overflow-wrap:  break-word;
}

/* First heading in document — no top margin */
.zolto-preview .zolto-heading:first-child {
  margin-top: 0;
}

/* Heading after heading — reduce gap */
.zolto-preview .zolto-heading + .zolto-heading {
  margin-top: var(--space-2);
}

.zolto-preview .zolto-h1 {
  font-size:      var(--heading-1);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-none);
}

.zolto-preview .zolto-h2 {
  font-size:      var(--heading-2);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--border-faint);
}

.zolto-preview .zolto-h3 {
  font-size:   var(--heading-3);
  font-weight: var(--weight-semibold);
}

.zolto-preview .zolto-h4 {
  font-size:   var(--heading-4);
  font-weight: var(--weight-medium);
}

.zolto-preview .zolto-h5 {
  font-size:      var(--heading-5);
  font-weight:    var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color:          var(--text-mute);
}

.zolto-preview .zolto-h6 {
  font-size:   var(--heading-6);
  font-weight: var(--weight-semibold);
  color:       var(--text-mute);
}


/* ── Paragraphs ── */

.zolto-preview .zolto-p {
  margin-top:    0;
  margin-bottom: var(--prose-block-gap);
  overflow-wrap: break-word;
  word-break:    break-word;
}

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


/* ── Inline styles ── */

.zolto-preview .zolto-bold {
  font-weight: var(--weight-semibold);
  color:       var(--text-heading);
}

.zolto-preview .zolto-italic {
  font-style: italic;
}

.zolto-preview .zolto-bolditalic {
  font-weight: var(--weight-semibold);
  font-style:  italic;
}

.zolto-preview .zolto-strikethrough {
  text-decoration:       line-through;
  text-decoration-color: var(--text-faint);
  color:                 var(--text-mute);
}

.zolto-preview .zolto-highlight {
  background:     rgba(250, 204, 21, 0.20);
  color:          var(--text-main);
  border-radius:  2px;
  padding:        0.05em 0.2em;
}

.zolto-preview .zolto-underline {
  text-decoration:       underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-normal);
}

.zolto-preview .zolto-sup {
  font-size:      0.72em;
  vertical-align: super;
  line-height:    0;
}

.zolto-preview .zolto-sub {
  font-size:      0.72em;
  vertical-align: sub;
  line-height:    0;
}

.zolto-preview .zolto-color {
  /* --cmp-color injected inline by renderer */
  color: var(--cmp-color, inherit);
}

.zolto-preview .zolto-mention {
  font-weight:  var(--weight-medium);
  color:        var(--accent-primary);
  cursor:       default;
}

.zolto-preview .zolto-hashtag {
  color:   var(--text-mute);
  cursor:  default;
}

.zolto-preview .zolto-mention:hover,
.zolto-preview .zolto-hashtag:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Links ── */

.zolto-preview .zolto-link {
  color:                 var(--preview-link);
  text-decoration:       underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(129, 140, 248, 0.40);
  transition:            var(--transition-color);
}

.zolto-preview .zolto-link:hover {
  color:                 var(--preview-link-hover);
  text-decoration-color: var(--preview-link-hover);
}

.zolto-preview .zolto-link:visited {
  color: #a78bfa;
}


/* ── Inline code ── */

.zolto-preview .zolto-code-inline {
  font-family:  var(--font-mono);
  font-size:    0.88em;
  font-weight:  var(--weight-normal);
  color:        var(--preview-code-text);
  background:   var(--preview-code-bg);
  border:       1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding:      0.15em 0.4em;
  white-space:  pre-wrap;
  overflow-wrap: break-word;
}


/* ── Blockquote ── */

.zolto-preview .zolto-blockquote {
  margin:       0 0 var(--prose-block-gap);
  padding-left: var(--space-5);
  border-left:  3px solid var(--preview-blockquote-border);
  color:        var(--text-mute);
  font-style:   italic;
}

.zolto-preview .zolto-blockquote p {
  margin-bottom: var(--space-2);
}

.zolto-preview .zolto-blockquote p:last-child {
  margin-bottom: 0;
}


/* ── Horizontal Rule ── */

.zolto-preview .zolto-hr {
  margin:     var(--space-8) 0;
  border:     none;
  border-top: 1px solid var(--preview-hr);
}


/* ── Lists ── */

.zolto-preview .zolto-list {
  margin:        0 0 var(--prose-block-gap);
  padding-left:  var(--space-6);
  list-style:    none;
}

.zolto-preview .zolto-list.zolto-list-ordered {
  counter-reset: list-counter;
}

.zolto-preview .zolto-list-item {
  position:      relative;
  margin-bottom: var(--space-1-5);
  line-height:   var(--leading-relaxed);
}

/* Unordered bullet */
.zolto-preview .zolto-list:not(.zolto-list-ordered) > .zolto-list-item::before {
  content:     "•";
  position:    absolute;
  left:        calc(-1 * var(--space-5));
  color:       var(--text-faint);
  font-size:   0.9em;
  line-height: var(--leading-relaxed);
}

/* Nested bullet */
.zolto-preview .zolto-list-nested:not(.zolto-list-ordered) > .zolto-list-item::before {
  content: "◦";
}

/* Ordered counter */
.zolto-preview .zolto-list-ordered > .zolto-list-item {
  counter-increment: list-counter;
}

.zolto-preview .zolto-list-ordered > .zolto-list-item::before {
  content:     counter(list-counter) ".";
  position:    absolute;
  left:        calc(-1 * var(--space-6));
  width:       var(--space-5);
  text-align:  right;
  color:       var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size:   0.88em;
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
}

/* Nested list */
.zolto-preview .zolto-list-nested {
  margin-top:    var(--space-1-5);
  margin-bottom: 0;
}

/* Checklist */
.zolto-preview .zolto-checklist {
  padding-left: var(--space-1);
}

.zolto-preview .zolto-checklist-item {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2-5);
  color:       var(--text-main);
}

.zolto-preview .zolto-check-icon {
  flex-shrink: 0;
  font-size:   0.85em;
  line-height: var(--leading-relaxed);
  color:       var(--text-faint);
  width:       1em;
}

.zolto-preview .zolto-checked .zolto-check-icon {
  color: var(--intent-success);
}

.zolto-preview .zolto-checked > *:not(.zolto-check-icon) {
  color:           var(--text-mute);
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
}

.zolto-preview .zolto-in-progress .zolto-check-icon { color: var(--intent-info); }
.zolto-preview .zolto-blocked     .zolto-check-icon { color: var(--intent-danger); }
.zolto-preview .zolto-cancelled   .zolto-check-icon { color: var(--text-faint); }
.zolto-preview .zolto-partial     .zolto-check-icon { color: var(--intent-warning); }


/* ── Definition List ── */

.zolto-preview .zolto-definition-list {
  margin-bottom: var(--prose-block-gap);
}

.zolto-preview .zolto-dt {
  font-weight:   var(--weight-semibold);
  color:         var(--text-heading);
  margin-top:    var(--space-3);
}

.zolto-preview .zolto-dt:first-child {
  margin-top: 0;
}

.zolto-preview .zolto-dd {
  padding-left: var(--space-5);
  color:        var(--text-mute);
  margin-top:   var(--space-1);
  border-left:  2px solid var(--border-subtle);
}


/* ── Table ── */

.zolto-preview .zolto-table-wrapper {
  overflow-x:    auto;
  margin-bottom: var(--prose-block-gap);
  border-radius: var(--radius-md);
  border:        1px solid var(--table-border);
}

.zolto-preview .zolto-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
  line-height:     var(--leading-normal);
}

.zolto-preview .zolto-table-caption {
  text-align:   center;
  font-size:    var(--text-sm);
  color:        var(--text-mute);
  padding:      var(--space-2) 0 var(--space-3);
  font-style:   italic;
}

.zolto-preview .zolto-table thead th {
  background:    var(--table-header-bg);
  color:         var(--table-header-text);
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding:       var(--space-2-5) var(--space-4);
  border-bottom: 1px solid var(--table-border);
  white-space:   nowrap;
}

.zolto-preview .zolto-table tbody td {
  padding:       var(--space-2-5) var(--space-4);
  color:         var(--table-body-text);
  border-bottom: 1px solid var(--table-border);
  vertical-align: top;
}

.zolto-preview .zolto-table tbody tr:last-child td {
  border-bottom: none;
}

.zolto-preview .zolto-table tbody tr:nth-child(even) td {
  background: var(--table-stripe);
}

.zolto-preview .zolto-table tbody tr:hover td {
  background: var(--table-row-hover);
}

/* Alignment helpers */
.zolto-preview .align-left   { text-align: left; }
.zolto-preview .align-center { text-align: center; }
.zolto-preview .align-right  { text-align: right; }


/* ── Code Block ── */

.zolto-preview .zolto-code-block {
  margin-bottom:  var(--prose-block-gap);
  border-radius:  var(--code-block-radius);
  border:         1px solid var(--code-block-border);
  background:     var(--code-block-bg);
  overflow:       hidden;
}

.zolto-preview .zolto-code-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-2) var(--space-4);
  background:      var(--code-block-header-bg);
  border-bottom:   1px solid var(--code-block-border);
}

.zolto-preview .zolto-code-lang {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  color:          var(--code-block-lang-text);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.zolto-preview .zolto-code-copy {
  font-family:  var(--font-mono);
  font-size:    var(--text-xs);
  color:        var(--code-block-copy-text);
  background:   transparent;
  border:       none;
  cursor:       pointer;
  padding:      var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:   var(--transition-color);
}

.zolto-preview .zolto-code-copy:hover {
  color:      var(--code-block-copy-hover);
  background: var(--bg-surface-2);
}

.zolto-preview .zolto-pre {
  margin:     0;
  padding:    var(--space-5) var(--space-6);
  overflow-x: auto;
  font-size:  var(--text-sm);
}

.zolto-preview .zolto-code {
  font-family:  var(--font-mono);
  font-size:    inherit;
  line-height:  var(--leading-relaxed);
  color:        var(--syntax-text);
  white-space:  pre;
  tab-size:     2;
}


/* ── Footnotes ── */

.zolto-preview .zolto-footnote-ref a {
  font-family:    var(--font-mono);
  font-size:      0.72em;
  color:          var(--footnote-ref-text);
  text-decoration: none;
  vertical-align: super;
  line-height:    0;
}

.zolto-preview .zolto-footnotes {
  margin-top:  var(--space-12);
  padding-top: var(--space-6);
  border-top:  1px solid var(--footnote-border);
}

.zolto-preview .zolto-footnotes-title {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  color:          var(--text-mute);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom:  var(--space-4);
}

.zolto-preview .zolto-footnote {
  font-size:     var(--text-sm);
  color:         var(--footnote-text);
  margin-bottom: var(--space-2);
  line-height:   var(--leading-relaxed);
}

.zolto-preview .zolto-footnote-backref {
  color:           var(--footnote-backref);
  text-decoration: none;
  margin-left:     var(--space-1-5);
  font-size:       0.9em;
}

.zolto-preview .zolto-footnote-backref:hover {
  color: var(--text-mute);
}


/* ── Embed Caption ── */

.zolto-preview .zolto-embed-caption {
  font-size:  var(--embed-caption-size);
  color:      var(--embed-caption-text);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}


/* ── Math inline ── */

.zolto-preview .zolto-math-inline .katex {
  font-size: 1em;
}

/* Math block title */
.zolto-preview .zolto-math-title {
  font-family:    var(--font-sans);
  font-size:      var(--math-title-size);
  font-weight:    var(--weight-medium);
  color:          var(--math-title-text);
  margin-bottom:  var(--space-3);
  font-style:     italic;
}

/* Equation number */
.zolto-preview .zolto-math-number {
  font-family:    var(--font-mono);
  font-size:      var(--text-sm);
  color:          var(--math-number-text);
  text-align:     right;
  margin-top:     var(--space-2);
  user-select:    none;
}


/* ── Error nodes ── */

.zolto-preview .zolto-error-node {
  font-family:  var(--font-mono);
  font-size:    var(--text-sm);
  color:        var(--text-error);
  background:   var(--intent-danger-bg);
  border:       1px solid var(--intent-danger-border);
  border-radius: var(--radius-md);
  padding:      var(--space-3) var(--space-4);
  margin-bottom: var(--prose-block-gap);
  display:      flex;
  gap:          var(--space-3);
  align-items:  flex-start;
}

.zolto-preview .zolto-error-icon {
  flex-shrink: 0;
  font-size:   1.1em;
}

.zolto-preview .zolto-error-source {
  display:     block;
  font-size:   0.85em;
  color:       var(--intent-danger-text);
  margin-top:  var(--space-1);
  opacity:     0.7;
}


/* ─────────────────────────────────────────────────────────────
   4. Diagram & Chart Caption / Figure Typography
   ───────────────────────────────────────────────────────────── */

.zolto-preview .zolto-diagram-caption,
.zolto-preview .zolto-chart-title,
.zolto-preview .zolto-math-plot figcaption {
  font-size:   var(--diagram-caption-font-size);
  color:       var(--diagram-caption-text);
  text-align:  center;
  margin-top:  var(--space-2);
  font-style:  italic;
}


/* ─────────────────────────────────────────────────────────────
   5. Component Typography Helpers
   ───────────────────────────────────────────────────────────── */

/* Card title */
.zolto-preview .zolto-card-title {
  font-weight:   var(--weight-semibold);
  font-size:     var(--text-md);
  color:         var(--card-title-text);
  line-height:   var(--leading-snug);
  margin-bottom: var(--space-2);
}

/* Step title */
.zolto-preview .zolto-step-title {
  font-weight:   var(--weight-semibold);
  color:         var(--steps-title-text);
  margin-bottom: var(--space-1);
}

/* Accordion header */
.zolto-preview .zolto-accordion-header {
  font-weight: var(--weight-medium);
  color:       var(--accordion-header-text);
  line-height: var(--leading-snug);
}

/* Tab labels */
.zolto-preview .zolto-tab-btn {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
}


/* ─────────────────────────────────────────────────────────────
   6. Responsive Typography
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root {
    --heading-1: 1.625rem;
    --heading-2: 1.25rem;
    --heading-3: 1.125rem;
    --heading-4: 1rem;
  }

  .zolto-preview {
    font-size: var(--text-base);
  }
}

@media (min-width: 1280px) {
  :root {
    --heading-1: 2.25rem;
    --heading-2: 1.625rem;
  }

  .zolto-preview {
    font-size: var(--text-md);
  }
}


/* ─────────────────────────────────────────────────────────────
   7. Print Typography
   ───────────────────────────────────────────────────────────── */

@media print {
  body,
  .zolto-preview {
    font-size:   11pt;
    line-height: 1.5;
    color:       #000;
  }

  .zolto-preview .zolto-h1 { font-size: 22pt; }
  .zolto-preview .zolto-h2 { font-size: 18pt; }
  .zolto-preview .zolto-h3 { font-size: 14pt; }
  .zolto-preview .zolto-h4 { font-size: 12pt; }
  .zolto-preview .zolto-h5,
  .zolto-preview .zolto-h6 { font-size: 11pt; }

  .zolto-preview .zolto-code-inline,
  .zolto-preview .zolto-pre {
    font-size: 9pt;
  }

  .zolto-preview .zolto-link {
    color:           #000;
    text-decoration: underline;
  }

  .zolto-preview .zolto-link[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}