:root {
  --background: 240 20% 98%;
  --foreground: 240 22% 10%;
  --primary: 268 92% 64%;
  --secondary: 196 92% 62%;
  --muted: 240 16% 94%;
  --muted-foreground: 240 10% 42%;
  --destructive: 0 78% 58%;
  --border: 240 18% 88%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 16px 36px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

.dark {
  --background: 240 20% 8%;
  --foreground: 220 18% 96%;
  --primary: 268 92% 68%;
  --secondary: 190 90% 62%;
  --muted: 240 16% 14%;
  --muted-foreground: 240 10% 68%;
  --destructive: 0 72% 60%;
  --border: 240 14% 20%;
  --card: 240 18% 11%;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 30px 72px rgba(0, 0, 0, 0.42);
}

:root[data-accent='cyan'],
.dark[data-accent='cyan'] {
  --primary: 191 95% 60%;
  --secondary: 220 90% 66%;
}

:root[data-accent='emerald'],
.dark[data-accent='emerald'] {
  --primary: 154 84% 54%;
  --secondary: 174 72% 50%;
}

:root[data-accent='amber'],
.dark[data-accent='amber'] {
  --primary: 40 96% 58%;
  --secondary: 18 90% 62%;
}

* {
  box-sizing: border-box;
}

html, body, #root {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

a, button, input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

::selection {
  background: hsl(var(--primary) / 0.28);
}