/* CK7 — accessible type scale on the CK4 layout; Apple-style families from CK6. */
:root {
  --type-body: 1rem;
  --type-h1: 1.875rem;
  --type-h2: 1.5rem;
  --type-h3: 1.25rem;
  --type-control: .875rem;
  --type-secondary: .875rem;
  --type-caption: .75rem;
}
html { font-size: 100%; }
body { font-size: var(--type-body); line-height: 1.5; }
p, li, dd { line-height: 1.5; }

/* Explicit component selectors override the older desktop and mobile rules. */
h1, .hero h1, .event-heading h1, .dash-head h1 {
  font-size: var(--type-h1);
  line-height: 1.3;
  letter-spacing: -.025em;
}
h2, .section h2, .section-head h2, .panel h2, .dialog-head h2, .row-between h2 {
  font-size: var(--type-h2);
  line-height: 1.35;
  letter-spacing: -.02em;
}
h3, .event-card h3, .steps h3, .vr-caption h3, .stand-list h3,
.job h3, .schedule h3, .guide h3 {
  font-size: var(--type-h3);
  line-height: 1.4;
  letter-spacing: -.015em;
}
.hero p, .guide p, .demo-option strong, .stand-item strong {
  font-size: var(--type-body);
  line-height: 1.5;
}
button, nav a, .solid, .outline, .quiet, .text-button,
.tabs a, .tabs button, .sidebar a, td .outline, td .solid,
.footer a, .footer .text-button {
  font-size: var(--type-control);
  line-height: 1.5;
}
input, select, textarea {
  font-size: var(--type-body);
  line-height: 1.5;
}
.field, .check, table, .site-title, .footer strong,
.muted, .section-head p, .event-card p, .event-heading p,
.steps p, .vr-caption p, .job p, .job .salary, .empty,
.notice, .demo-option span, #toast {
  font-size: var(--type-secondary);
  line-height: 1.5;
}
.site-title b { font-size: var(--type-body); }
small, .preview, .preview .wrap, .eyebrow, .sidebar .eyebrow,
.hero-image figcaption, .event-no, dl dt, .status, .step-no,
.footer-grid, .breadcrumb, .stand-item p, .note, .job small,
.metric span, td small, .label-list span, .progress-line span,
.bar, .session-bar, .subtle {
  font-size: var(--type-caption);
  line-height: 1.5;
}
.metric strong { font-size: 1.75rem; line-height: 1.3; }
/* These controls contain symbols, not labels. */
.icon-button { font-size: 1.75rem; line-height: 1; }
.menu-button { font-size: 1.3125rem; line-height: 1.5; }

/* Keep long titles and enlarged text inside their existing columns. */
.workspace > *, .hero-grid > *, .event-heading > *, .dash-head > * { min-width: 0; }
@media (max-width: 700px) {
  :root { --type-h1: 1.75rem; --type-h2: 1.375rem; }
  .row-between { flex-wrap: wrap; }
}