/* Clocks section typography.
   Loaded after shared/viewer.css so it can repoint the engine's hardcoded
   families without forking the shared stylesheet. */

:root {
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Only one display weight ships — pin it so the browser never fakes a bolder cut. */
  --display-weight: 600;
  --text: 'PT Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body { font-family: var(--text); }

/* Headline voice */
.sidebar-title,
.modal-title,
.modal-eyebrow,
.scene-help-title,
.toast-label,
.intro-label,
.scene-label-name .label-slot,
.action-btn.action-pill {
  font-family: var(--display);
  font-weight: var(--display-weight);
}

/* Technical voice — the dials and counters read as instrument print. */
.scene-label-meta .label-slot,
.scene-num,
.sidebar-meta,
.nav-tip kbd,
.shortcut-row kbd,
.toast-url {
  font-family: var(--mono);
}

/* Playfair has a small x-height for a serif: give it a point back so the
   14px chrome labels do not read smaller than the surrounding sans. */
.sidebar-title { font-size: 15px; letter-spacing: 0; }
.scene-label-name .label-slot { font-size: 15px; letter-spacing: 0; }
.modal-title { font-size: 22px; letter-spacing: -.005em; }
.modal-eyebrow { letter-spacing: .18em; }

/* IBM Plex Mono is wider per character than the JetBrains Mono it replaces. */
.scene-num,
.scene-label-meta .label-slot { font-size: 10px; letter-spacing: .02em; }