:root {
  --background: 36 33% 97%;
  --foreground: 210 18% 16%;
  --primary: 145 63% 34%;
  --secondary: 34 91% 58%;
  --muted: 36 25% 92%;
  --destructive: 0 72% 52%;
  --border: 36 18% 84%;
  --card: 0 0% 100%;

  --shadow-sm: 0 1px 2px hsla(210, 20%, 20%, 0.06);
  --shadow-md: 0 10px 25px hsla(210, 20%, 20%, 0.10);
  --shadow-lg: 0 20px 45px hsla(210, 20%, 20%, 0.16);

  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 210 20% 9%;
  --foreground: 36 25% 96%;
  --primary: 145 58% 48%;
  --secondary: 34 96% 62%;
  --muted: 210 16% 16%;
  --destructive: 0 78% 60%;
  --border: 210 14% 24%;
  --card: 210 18% 12%;
}

* {
  box-sizing: border-box;
}

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

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

.card-surface {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.lift {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.hero-gradient {
  background:
    radial-gradient(circle at top left, hsla(145, 63%, 34%, 0.18), transparent 38%),
    radial-gradient(circle at top right, hsla(34, 91%, 58%, 0.22), transparent 32%),
    linear-gradient(180deg, hsl(var(--card)), hsl(var(--muted)));
}

.bottom-safe {
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

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

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