@import "tailwindcss";

@theme {
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --color-ink: #011738;
  --color-paper: #f3f6fb;
  --color-panel: #ffffff;
  --color-line: #d9e3f0;
  --color-muted: #5a6a80;
  --color-ember: #0271fd;
  --color-ember-dark: #0156c8;
  --color-pine: #1d6b45;
  --color-pine-soft: #e7f5ec;
  --color-warn: #8a5a12;
  --color-warn-soft: #f8ecd4;
  --color-fail: #9d2430;
  --color-fail-soft: #fde8e8;
}

.font-display {
  font-weight: 700;
}

.transcript-line.is-active {
  background: var(--color-warn-soft);
}