/* File: /assets/css/core/typography.css
   Owner: EC
   Purpose: Typographic system mapping tokens to elements/utilities
   Version: 1.0
   Updated: 2025-11-06
   Notes:
     - Uses families, sizes, and line-heights from tokens.css
     - Colors come from themes (heading/body), no new hex
*/

/* --- 1) Base copy ------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--lh-body);
  color: var(--color-body);
}

/* Paragraph rhythm (kept minimal; components can add their own) */
p + p { margin-top: var(--space-4); }

/* --- 2) Headings ------------------------------------------------- */
/* H1 is expressive: Delight, extra-bold */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h1-size);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-block: 0 0.75rem;
}

/* H2/H3 use tighter sans for UI clarity */
h2, h3 {
  font-family: var(--font-sans-tight);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  letter-spacing: -0.005em;
  margin-block: var(--space-5) var(--space-2);
}

h2 { font-size: var(--text-h2-size); }
h3 { font-size: var(--text-h3-size); }

/* Sensible fallbacks for h4–h6 without growing the scale */
h4, h5, h6 {
  font-family: var(--font-sans-tight);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  margin-block: var(--space-4) var(--space-2);
}
h4 { font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem); }
h5 { font-size: clamp(1rem, 0.95rem + 0.15vw, 1.1rem); }
h6 { font-size: clamp(0.95rem, 0.9rem + 0.1vw, 1rem); }

/* --- 3) Small text, lead text ----------------------------------- */
small, .text-small {
  font-size: var(--text-small-size);
  line-height: 1.4;
  color: var(--color-body);
  opacity: 0.9; /* subtle de-emphasis without new colors */
}
.lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.45;
}

/* --- 4) Lists ---------------------------------------------------- */
ul, ol { padding-inline-start: 1.25rem; }
li + li { margin-top: 0.25rem; }

/* --- 5) Quotes --------------------------------------------------- */
blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

/* --- 6) Code & preformatted ------------------------------------- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
  line-height: 1.5;
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: auto;
}

/* --- 7) Horizontal rule ----------------------------------------- */
hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-5);
}