/* ── Headings ───────────────────────────────────────────────── */
h1, .h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -0.03em; color: var(--color-text); }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -0.03em; color: var(--color-text); }
h3, .h3 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.02em; color: var(--color-text); }
h4, .h4 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.015em; color: var(--color-text); }
h5, .h5 { font-size: var(--text-xl);  font-weight: 700; line-height: var(--leading-normal); color: var(--color-text); }
h6, .h6 { font-size: var(--text-lg);  font-weight: 600; line-height: var(--leading-normal); color: var(--color-text); }

p { margin-bottom: var(--space-4); color: var(--color-text-muted); line-height: var(--leading-relaxed); }
p:last-child { margin-bottom: 0; }

/* ── Text sizes ─────────────────────────────────────────────── */
.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); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* ── Font weights ───────────────────────────────────────────── */
.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Color utilities ────────────────────────────────────────── */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-white   { color: #fff; }

/* ── Alignment ──────────────────────────────────────────────── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Transform ──────────────────────────────────────────────── */
.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* ── Tracking ───────────────────────────────────────────────── */
.tracking-widest { letter-spacing: var(--tracking-widest); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }

/* ── Mono ───────────────────────────────────────────────────── */
.font-mono { font-family: var(--font-mono); }

/* ── Links ──────────────────────────────────────────────────── */
.link-muted { color: var(--color-text-muted); }
.link-muted:hover { color: var(--color-primary); }

/* ── Code ───────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-neutral-100);
  color: var(--color-primary-deep);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

pre {
  font-family: var(--font-mono);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
  font-size: var(--text-sm);
}

/* ── Utilities ──────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.hidden  { display: none !important; }
.block   { display: block; }

.min-h-screen { min-height: 100vh; }
.w-100, .w-full { width: 100%; }

/* Spacing */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mt-10{ margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }  .mb-12 { margin-bottom: var(--space-12); }
.ml-2 { margin-left: var(--space-2); } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }

.p-0 { padding: 0; } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pt-2 { padding-top: var(--space-2); } .pb-3 { padding-bottom: var(--space-3); }

.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-top    { border-top: 1px solid var(--color-border); }

.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-wrap  { white-space: nowrap; }

/* ── Gradient Text ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text--blue {
  background: linear-gradient(135deg, #2563eb 0%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}