/* ============================================================
   Valet Design System — Typography Base
   Requires: base-tokens.css, client-tokens.css

   Sets element-level defaults using :where() — zero specificity,
   fully overridable by component or utility classes.
   ============================================================ */

/* ── Document defaults ───────────────────────────────────── */
:where(html) {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* ── Headings ────────────────────────────────────────────── */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: balance;
}

:where(h1) { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); }
:where(h2) { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
:where(h3) { font-size: var(--text-3xl); }
:where(h4) { font-size: var(--text-2xl); }
:where(h5) { font-size: var(--text-xl);  font-weight: 600; }
:where(h6) { font-size: var(--text-lg);  font-weight: 600; }

/* ── Body copy ───────────────────────────────────────────── */
:where(p) {
  max-inline-size: 68ch;
  text-wrap: pretty;
}

:where(p + p) {
  margin-block-start: var(--space-4);
}

/* ── Links ───────────────────────────────────────────────── */
:where(a) {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

:where(a:hover) {
  color: color-mix(in oklch, var(--color-primary) 80%, var(--ink));
}

:where(a:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Lists ───────────────────────────────────────────────── */
:where(ul, ol) {
  padding-inline-start: var(--space-6);
}

:where(li + li) {
  margin-block-start: var(--space-2);
}

/* ── Inline elements ─────────────────────────────────────── */
:where(strong, b) { font-weight: 600; }
:where(em, i)     { font-style: italic; }

:where(small) {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

:where(code, kbd, samp) {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.875em;
  background-color: color-mix(in oklch, var(--color-bg) 60%, var(--color-surface));
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}

:where(kbd) {
  font-size: 0.8em;
  border-block-end-width: 2px;
}

:where(mark) {
  background-color: color-mix(in oklch, var(--color-accent) 25%, transparent);
  color: inherit;
  border-radius: 2px;
  padding-inline: 0.2em;
}

/* ── Horizontal rule ─────────────────────────────────────── */
:where(hr) {
  border: none;
  border-block-start: 1px solid var(--color-border-light);
  margin-block: var(--space-8);
}

/* ── Blockquote ──────────────────────────────────────────── */
:where(blockquote) {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-5);
  color: var(--color-text-muted);
  font-style: italic;
  margin-inline: 0;
}

/* ── UI text utilities ───────────────────────────────────── */
.text-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }