@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root,
body[data-theme="light"],
body[data-theme="dark"],
body[data-theme="auto"] {
  --color-background-primary: #26272c;
  --color-background-secondary: #1b1c20;
  --color-background-hover: #2e2f36;
  --color-background-hover--transparent: #2e2f3600;
  --color-background-border: #3a3b42;
  --color-background-item: #4a4c55;

  --color-foreground-primary: #c9cdd3;
  --color-foreground-secondary: #8b8f98;
  --color-foreground-muted: #5f636c;
  --color-foreground-border: #4a4c55;

  --color-brand-primary: #00d8e0;
  --color-brand-content: #00d8e0;
  --color-brand-visited: #00d8e0;

  --font-stack: "Space Grotesk", "Segoe UI", "Roboto", system-ui, sans-serif;
  --font-stack--monospace: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
    monospace;
  --font-stack--headings: var(--font-stack);
}