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

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --background: #0a0a0a !important;
  --foreground: #f4f4f4 !important;
  --card: #111111 !important;
  --card-foreground: #f4f4f4 !important;
  --popover: #111111 !important;
  --popover-foreground: #f4f4f4 !important;
  --primary: #f4f4f4 !important;
  --primary-foreground: #0a0a0a !important;
  --secondary: #171717 !important;
  --secondary-foreground: #f4f4f4 !important;
  --chat-user: #1a1a1a !important;
  --chat-user-foreground: #f4f4f4 !important;
  --muted: #141414 !important;
  --muted-foreground: #a3a3a3 !important;
  --accent: #1a1a1a !important;
  --accent-foreground: #f4f4f4 !important;
  --border: #2a2a2a !important;
  --input: #171717 !important;
  --ring: #f4f4f4 !important;
  --sidebar: #0a0a0a !important;
  --sidebar-foreground: #f4f4f4 !important;
  --sidebar-border: #242424 !important;
  --sidebar-accent: #171717 !important;
  --sidebar-accent-foreground: #f4f4f4 !important;
  --link: #f4f4f4 !important;
  --favicon-plate: #f4f4f4 !important;
  --overlay: #000000c0 !important;
  --scrollbar: #2a2a2a !important;
  --scrollbar-hover: #3a3a3a !important;
  --radius: 2px !important;
}

[data-theme="light"] {
  color-scheme: light;
  --background: #f5f5f5 !important;
  --foreground: #111111 !important;
  --card: #ffffff !important;
  --card-foreground: #111111 !important;
  --popover: #ffffff !important;
  --popover-foreground: #111111 !important;
  --primary: #111111 !important;
  --primary-foreground: #f5f5f5 !important;
  --secondary: #ececec !important;
  --secondary-foreground: #111111 !important;
  --chat-user: #e8e8e8 !important;
  --chat-user-foreground: #111111 !important;
  --muted: #efefef !important;
  --muted-foreground: #525252 !important;
  --accent: #ececec !important;
  --accent-foreground: #111111 !important;
  --border: #d4d4d4 !important;
  --input: #ffffff !important;
  --ring: #111111 !important;
  --sidebar: #f5f5f5 !important;
  --sidebar-foreground: #111111 !important;
  --sidebar-border: #e0e0e0 !important;
  --sidebar-accent: #ececec !important;
  --sidebar-accent-foreground: #111111 !important;
  --link: #111111 !important;
  --favicon-plate: #111111 !important;
  --overlay: #11111199 !important;
  --scrollbar: #d4d4d4 !important;
  --scrollbar-hover: #a3a3a3 !important;
  --radius: 2px !important;
}

html,
body,
button,
input,
textarea,
select,
h1,
h2,
h3,
p {
  font-family: "Host Grotesk", system-ui, sans-serif !important;
}

/* The page logo is two bars. Replace that mark with the mnemo M. */
div.rounded-full:has(> span.rounded-full.bg-card + span.rounded-full.bg-card),
div.rounded-full.bg-muted:has(> span.rounded-full.bg-primary + span.rounded-full.bg-primary) {
  background-color: #0a0a0a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f4f4f4' d='M6 25V7h4.2l5.8 9.2L21.8 7H26v18h-3.6V13.2L17.2 22h-2.4l-5.2-8.8V25H6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 62% !important;
}
div.rounded-full:has(> span.rounded-full.bg-card + span.rounded-full.bg-card) > span,
div.rounded-full.bg-muted:has(> span.rounded-full.bg-primary + span.rounded-full.bg-primary) > span {
  display: none !important;
}