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

:root {
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --radius: 0.9rem;

  --background: 210 38% 98%;
  --foreground: 218 32% 16%;
  --card: 0 0% 100%;
  --card-foreground: 218 32% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 218 32% 16%;
  --primary: 199 89% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 208 40% 95%;
  --secondary-foreground: 219 35% 18%;
  --muted: 210 34% 93%;
  --muted-foreground: 217 19% 38%;
  --accent: 191 61% 91%;
  --accent-foreground: 218 32% 16%;
  --border: 214 31% 86%;
  --input: 214 31% 86%;
  --ring: 199 89% 42%;

  --sidebar-background: 210 35% 97%;
  --sidebar-foreground: 218 28% 20%;
  --sidebar-primary: 199 89% 42%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 201 52% 92%;
  --sidebar-accent-foreground: 218 32% 16%;
  --sidebar-border: 214 31% 86%;
}

.dark {
  --background: 220 23% 12%;
  --foreground: 210 18% 92%;
  --card: 220 20% 15%;
  --card-foreground: 210 18% 92%;
  --popover: 220 20% 15%;
  --popover-foreground: 210 18% 92%;
  --primary: 196 83% 55%;
  --primary-foreground: 220 23% 12%;
  --secondary: 219 16% 20%;
  --secondary-foreground: 210 18% 92%;
  --muted: 219 16% 22%;
  --muted-foreground: 213 12% 66%;
  --accent: 200 31% 24%;
  --accent-foreground: 210 18% 92%;
  --border: 217 16% 26%;
  --input: 217 16% 26%;
  --ring: 196 83% 55%;

  --sidebar-background: 221 20% 10%;
  --sidebar-foreground: 210 16% 90%;
  --sidebar-primary: 196 83% 55%;
  --sidebar-primary-foreground: 220 23% 12%;
  --sidebar-accent: 217 18% 18%;
  --sidebar-accent-foreground: 210 16% 90%;
  --sidebar-border: 217 16% 24%;
}

body {
  background:
    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.15) 0, transparent 34%),
    radial-gradient(circle at 100% 0%, hsl(178 68% 44% / 0.12) 0, transparent 28%),
    linear-gradient(180deg, hsl(var(--background)) 0%, hsl(210 30% 96%) 100%);
}

.dark body {
  background:
    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.2) 0, transparent 32%),
    radial-gradient(circle at 100% 0%, hsl(180 70% 40% / 0.14) 0, transparent 26%),
    linear-gradient(180deg, hsl(var(--background)) 0%, hsl(220 23% 10%) 100%);
}

h1,
h2,
h3,
h4 {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

[data-sidebar="sidebar"] {
  backdrop-filter: blur(12px);
  background: hsl(var(--sidebar-background) / 0.85);
}

#new-chat-button,
#search-chats-button,
#sidebar-trigger-button {
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
}

#new-chat-button:hover,
#search-chats-button:hover,
#sidebar-trigger-button:hover {
  background: hsl(var(--accent));
}

textarea,
input[type="text"],
input[type="password"] {
  border-radius: 0.85rem !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.32);
  border-radius: 999px;
}