/* Slate Pro typography
   Inter keeps editor chrome compact and readable. Text placed on the canvas
   remains controlled by the text tool's selected font. */
:root {
  --ui-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", ui-monospace, monospace;
}

html,
body {
  font-family: var(--ui-font) !important;
  font-weight: 400;
  line-height: 1.4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: var(--ui-font) !important;
}

/* Keep all editor chrome on the same typographic baseline. */
.header,
.panel,
.center,
.base-clips,
.dialog,
.button,
.settings,
.tool,
.controls,
.workspace,
.sound-source-tab,
.sound-tab,
.sound-card,
.media-library-item,
.control-section,
.timeline-edit-item,
.overlay-track-item {
  font-family: var(--ui-font);
}

.brand__project-name {
  font-weight: 600;
  letter-spacing: -0.012em;
}

.brand__tagline {
  font-weight: 500;
  letter-spacing: -0.006em;
}

.panel h2,
.tool__label,
.control-section__title,
.dialog__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.button,
.settings,
.sound-source-tab,
.sound-tab {
  font-weight: 600;
  letter-spacing: -0.006em;
}

/* Small labels need a little more room on high-density timelines. */
.sound-card__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.sound-card__duration {
  font-size: 11px;
  font-weight: 500;
}

.base-clips__ruler-tick {
  font-size: 11px;
  font-weight: 500;
}

.timeline-edit-item {
  font-size: 12px;
  font-weight: 500;
}

/* Numeric UI is easier to scan when every digit has the same width. */
#currentTime,
#duration,
.control-num-input,
.sound-card__duration,
.timeline-edit-item__time-val,
.base-clips__ruler-tick {
  /* font-family: var(--ui-font-mono); */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

#currentTime,
#duration {
  font-weight: 500;
}

/* Preserve the chosen font for text objects rendered in the preview. */
.stage [data-text-font],
.stage [contenteditable="true"] {
  font-family: inherit;
}

@media (prefers-contrast: more) {
  html,
  body {
    -webkit-font-smoothing: auto;
  }
}