:root {
  --background: 145 55% 96%;
  --foreground: 148 32% 11%;
  --primary: 148 56% 24%;
  --secondary: 43 74% 61%;
  --muted: 147 24% 90%;
  --muted-foreground: 148 14% 37%;
  --destructive: 2 74% 53%;
  --border: 146 20% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px rgba(7, 24, 18, 0.08);
  --shadow-md: 0 18px 40px rgba(7, 24, 18, 0.12);
  --shadow-lg: 0 28px 70px rgba(7, 24, 18, 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 148 46% 8%;
  --foreground: 52 52% 95%;
  --primary: 148 48% 42%;
  --secondary: 43 78% 63%;
  --muted: 149 25% 16%;
  --muted-foreground: 48 18% 72%;
  --destructive: 3 78% 61%;
  --border: 149 19% 22%;
  --card: 147 35% 11%;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.44);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  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);
}

.font-display {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

input[type='range'] {
  width: 100%;
}

.card-glow {
  position: relative;
}

.card-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(var(--secondary) / 0.2), transparent 32%, hsl(var(--primary) / 0.16));
  z-index: -1;
  filter: blur(12px);
}

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

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.35);
  border-radius: 999px;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}