:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 38 32% 96%;
  --foreground: 24 26% 13%;
  --card: 36 40% 99%;
  --card-foreground: 24 26% 13%;
  --popover: 36 40% 99%;
  --popover-foreground: 24 26% 13%;
  --primary: 18 72% 38%;
  --primary-foreground: 35 48% 96%;
  --secondary: 89 22% 26%;
  --secondary-foreground: 42 45% 95%;
  --muted: 38 22% 88%;
  --muted-foreground: 28 14% 38%;
  --accent: 42 86% 55%;
  --accent-foreground: 27 38% 14%;
  --destructive: 0 74% 42%;
  --destructive-foreground: 35 48% 96%;
  --success: 142 54% 32%;
  --success-foreground: 40 44% 96%;
  --warning: 35 88% 44%;
  --warning-foreground: 26 38% 14%;
  --info: 204 70% 36%;
  --info-foreground: 40 44% 96%;
  --border: 32 18% 80%;
  --input: 32 18% 80%;
  --ring: 18 72% 38%;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 18px 48px hsl(var(--primary) / 0.20);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 24 26% 9%;
  --foreground: 38 32% 94%;
  --card: 25 24% 13%;
  --card-foreground: 38 32% 94%;
  --popover: 25 24% 13%;
  --popover-foreground: 38 32% 94%;
  --primary: 22 78% 58%;
  --primary-foreground: 25 28% 10%;
  --secondary: 88 24% 58%;
  --secondary-foreground: 24 26% 9%;
  --muted: 26 18% 20%;
  --muted-foreground: 36 14% 72%;
  --accent: 42 90% 62%;
  --accent-foreground: 25 28% 10%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 35 48% 96%;
  --success: 145 52% 48%;
  --success-foreground: 24 26% 9%;
  --warning: 38 92% 58%;
  --warning-foreground: 24 26% 9%;
  --info: 202 78% 62%;
  --info-foreground: 24 26% 9%;
  --border: 28 14% 28%;
  --input: 28 14% 28%;
  --ring: 22 78% 58%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button, input, select, textarea {
  font: inherit;
}

input, select, textarea {
  font-size: max(16px, 1rem);
}

.app-shell {
  min-height: 100vh;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.hero-orb {
  background:
    radial-gradient(circle at 22% 18%, hsl(var(--accent) / 0.42), transparent 28%),
    radial-gradient(circle at 78% 22%, hsl(var(--secondary) / 0.34), transparent 30%),
    linear-gradient(135deg, hsl(var(--primary) / 0.18), hsl(var(--card)) 56%, hsl(var(--accent) / 0.22));
}

@media (min-width: 768px) {
  .app-shell {
    padding-bottom: 0;
  }
}