/* Safe typography parity layer (non-layout) */
:root {
  --typo-heading: 'Fraunces', Georgia, serif;
  --typo-body: 'Fraunces', Georgia, serif;
  --typo-mono: 'Fira Code', 'Fira Mono', monospace;
  --typo-text-light: #1f1814;
  --typo-muted-light: rgba(52,40,34,0.72);
  --typo-text-dark: #f2ede8;
  --typo-muted-dark: rgba(242,237,232,0.72);

  --fs-h1: clamp(2.4rem, 4.6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.2vw, 3.1rem);
  --fs-h3: clamp(1.3rem, 2.1vw, 1.9rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.18rem);
  --fs-body: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-micro: 0.6875rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

html, body {
  font-family: var(--typo-body);
  font-weight: var(--fw-normal);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

h1, .heading-display {
  font-family: var(--typo-heading) !important;
  letter-spacing: -0.018em;
  line-height: 1.04;
  font-size: var(--fs-h1);
}

h2, .heading-section {
  font-family: var(--typo-heading) !important;
  letter-spacing: -0.014em;
  line-height: 1.08;
  font-size: var(--fs-h2);
}

h3, h4, .heading-card {
  font-family: var(--typo-heading) !important;
  letter-spacing: -0.01em;
  line-height: 1.14;
  font-size: var(--fs-h3);
}

p, li, a, button,
.subtitle,
.text-lead,
.text-muted,
.pricing-desc,
.faq-answer,
.footer-copyright,
.small,
.meta {
  font-family: var(--typo-body) !important;
}

p, li, .pricing-desc, .faq-answer {
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  font-optical-sizing: auto;
  line-height: 1.7;
  letter-spacing: 0.008em;
}

.subtitle,
.text-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-normal);
  font-optical-sizing: auto;
  line-height: 1.7;
  letter-spacing: 0.008em;
}

.text-muted,
.footer-copyright,
.small,
.meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-normal);
  font-optical-sizing: auto;
  line-height: 1.6;
  letter-spacing: 0.012em;
}

.subtitle,
.text-lead,
.text-muted,
.pricing-desc,
.faq-answer,
.footer-copyright,
.small,
.meta {
  color: var(--typo-muted-light);
}

html.dark-mode .subtitle,
html.dark-mode .text-lead,
html.dark-mode .text-muted,
html.dark-mode .pricing-desc,
html.dark-mode .faq-answer,
html.dark-mode .footer-copyright,
html.dark-mode .small,
html.dark-mode .meta {
  color: var(--typo-muted-dark);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode .heading-display,
html.dark-mode .heading-section,
html.dark-mode .heading-card {
  color: var(--typo-text-dark);
}

code, pre, .terminal-mock, .terminal-body, .terminal-bar,
.code-block, .code-body, .code-head,
.endpoint-path, .method-badge {
  font-family: var(--typo-mono) !important;
  font-feature-settings: 'liga' 1, 'calt' 1;
  font-variant-ligatures: contextual;
  letter-spacing: -0.01em;
}

/* ── Crisp UI label/value hierarchy (OpenClaw-style) ── */
label,
.form-label,
.field-label {
  font-family: var(--typo-body) !important;
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.text-uppercase,
.post-card-tag,
.featured-tag,
.hero-badge,
.footer-col h4 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro);
}

/* Buttons — medium weight, clean tracking */
button,
.btn-primary,
.btn-secondary,
.btn-nav-primary,
.btn-nav-ghost,
.btn-hero,
.btn-hero-outline,
.cookie-accept,
.cookie-manage {
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

/* Input fields — monospace values where appropriate */
input, select, textarea {
  font-family: var(--typo-body) !important;
  font-weight: var(--fw-normal);
  font-size: var(--fs-body);
  letter-spacing: 0.005em;
}

/* Tabular numbers for dates, prices, stats */
.post-meta,
.post-card-footer,
.pricing-amount,
.stat-number,
.pricing-period {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

nav, button, input, select, textarea,
.nav-links a, .nav-links button,
.btn-nav-ghost, .btn-nav-primary,
.btn-primary, .btn-secondary,
.btn-hero, .btn-hero-outline,
.footer-col h4, .footer-col a, .footer-copyright,
.newsletter-input, .signin-field,
.post-card-tag, .post-card-footer, .post-meta,
.featured-tag, .hero-badge,
.pricing-tier, .pricing-period,
.cookie-banner, .cookie-accept, .cookie-manage,
.mobile-menu a, .mobile-menu-close,
.dark-mode-toggle,
.docs-sidebar a, .docs-sidebar h4 {
  font-family: var(--typo-body) !important;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* Nav links — medium weight, clean */
.nav-links a,
.nav-links button {
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
}

/* Footer links/text — lighter weight, wider tracking */
.footer-col a,
.footer-copyright {
  font-weight: var(--fw-normal);
  letter-spacing: 0.008em;
}