@font-face {
  font-family: "Roboto Variable";
  src: url("./assets/fonts/engine-roboto-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./assets/fonts/engine-geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --engine-bg: #040507;
  --engine-panel: #0b0e13;
  --engine-raised: #111620;
  --engine-hover: #151b25;
  --engine-line: #1d2531;
  --engine-line-soft: #141b25;
  --engine-text: #f7f9fc;
  --engine-muted: #9aa6b6;
  --engine-subtle: #637083;
  --engine-blue: #397dff;
  --engine-blue-bright: #5b94ff;
  --engine-green: #3ff28a;
  --engine-red: #ff5d68;
  --engine-amber: #ffd447;
  --engine-purple: #a879ff;
  --engine-font: Inter, "Roboto Variable", Roboto, system-ui, sans-serif;
  --engine-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --engine-grid:
    radial-gradient(circle at 74% -15%, rgba(57, 125, 255, 0.13), transparent 34rem),
    radial-gradient(circle at 97% 24%, rgba(168, 121, 255, 0.07), transparent 28rem),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--engine-bg);
  --engine-grid-size: auto, auto, 24px 24px, 24px 24px, auto;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--engine-grid);
  background-size: var(--engine-grid-size);
  color: var(--engine-text);
  font: 14px/1.45 var(--engine-font);
}