@font-face {
  font-family: "Onest";
  src: url("/fonts/OnestVariable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --default-font-family: "Onest", system-ui, sans-serif;
  font-family: "Onest", system-ui, sans-serif;
}

html, body, button, input, textarea, select, option {
  font-family: "Onest", system-ui, sans-serif !important;
}

html:not([data-theme="light"]) {
  background-color: #070a12;
  --app-bg: #070a12;
  --app-hero: radial-gradient(circle at 50% -18%, #182139 0%, #0c1322 42%, #070a12 100%);
  --app-card: #141d2d;
  --app-card-soft: #141d2ddd;
  --app-panel: #1b2639;
  --app-border: #31405a;
  --app-calendar-empty: #0b1421;
  --app-calendar-past: #111c2d;
  --app-calendar-past-hover: #18263a;
  --background: var(--app-card);
  --card: var(--app-card);
  --popover: var(--app-card);
  --secondary: var(--app-bg);
  --muted: var(--app-bg);
  --border: var(--app-border);
  --input: var(--app-border);
}

html:not([data-theme="light"]) body {
  background-color: #070a12;
}

body:has(> main.page),
body:has(> main.project-library) {
  background: radial-gradient(circle at 70% -15%, #17213a 0%, #0b1220 42%, #070a12 100%) !important;
}

main.project-library {
  background: transparent !important;
}

.stage-panel {
  background: #0a101b !important;
}

.transport-bar,
.timeline,
.tools {
  background-color: #111a2a !important;
}