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

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --brand-sans: Geist, Arial, sans-serif;
  --brand-mono: "IBM Plex Mono", Consolas, monospace;
  --brand-deep: #11111f;
  --brand-canvas: #171728;
  --brand-surface: #1d1d32;
  --brand-raised: #24243d;
  --brand-border: #474765;
  --brand-primary: #b7b7ff;
  --brand-primary-hover: #a39cff;
  --brand-accent: #8c83f4;
  --brand-alternative: #6cd6d0;
  --brand-alternative-ink: #116b70;
  --brand-text: #f5f5fa;
  --brand-muted: #aaaabd;
  --brand-paper: #f5f5fa;
  --brand-ink: #171728;
  --brand-light-muted: #6b6b82;
  --brand-positive: #7de0b1;
  --brand-error: #ffb9c3;
  --brand-control-radius: 4px;
  --brand-panel-radius: 10px;
  --brand-focus-width: 2px;
  --brand-feedback-duration: 160ms;
}

html[data-brand-surface="console"] {
  --brand-deep: #25282d;
  --brand-canvas: #25282d;
  --brand-surface: #2d3036;
  --brand-raised: #3b3e46;
  --brand-border: #51565f;
  --brand-text: #f0f1ed;
  --brand-muted: #bec3cb;
  --brand-paper: #f0f1ed;
  --brand-ink: #25282d;
  --brand-light-muted: #62676f;
}

@media (prefers-reduced-motion: reduce) {
  :root { --brand-feedback-duration: 0ms; }
}