:root {
  --background: 228 33% 97%;
  --foreground: 232 39% 12%;
  --primary: 214 100% 58%;
  --secondary: 271 90% 64%;
  --muted: 228 24% 88%;
  --muted-foreground: 228 14% 42%;
  --destructive: 355 78% 58%;
  --border: 229 19% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px hsla(224, 60%, 20%, 0.08);
  --shadow-md: 0 0 0 1px hsla(214, 100%, 58%, 0.14), 0 18px 55px hsla(226, 90%, 40%, 0.18);
  --shadow-lg: 0 24px 80px hsla(236, 70%, 8%, 0.22);
  --transition-fast: 120ms ease;
  --transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 230 34% 8%;
  --foreground: 220 30% 96%;
  --primary: 213 100% 60%;
  --secondary: 273 95% 67%;
  --muted: 228 18% 18%;
  --muted-foreground: 225 16% 70%;
  --destructive: 358 79% 63%;
  --border: 228 19% 20%;
  --card: 230 28% 12%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

.status-dot {
  display: inline-flex;
  height: 10px;
  width: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px hsl(var(--card) / 0.7);
}

.status-dot.online {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
}

.status-dot.idle {
  background: hsl(var(--muted-foreground));
}

.status-pill {
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.page-enter {
  animation: page-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

button,
a,
input {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary) / 0.55);
}

.backdrop-blur-xl,
.backdrop-blur-2xl {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@media (max-width: 640px) {
  .page-enter {
    animation-duration: 240ms;
  }
}