:root {
  --background: 44 54% 96%;
  --foreground: 142 35% 14%;
  --primary: 142 55% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 91% 55%;
  --secondary-foreground: 142 35% 14%;
  --muted: 45 36% 88%;
  --muted-foreground: 142 15% 38%;
  --destructive: 4 74% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 43 30% 78%;
  --card: 0 0% 100%;
  --saffron: 26 93% 53%;
  --lotus: 334 55% 48%;
  --shadow-sm: 0 2px 10px hsl(142 55% 16% / 0.08);
  --shadow-md: 0 12px 34px hsl(142 55% 16% / 0.12);
  --shadow-lg: 0 22px 60px hsl(142 55% 16% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 142 30% 8%;
  --foreground: 44 44% 92%;
  --primary: 142 45% 48%;
  --primary-foreground: 142 35% 8%;
  --secondary: 41 89% 58%;
  --secondary-foreground: 142 35% 8%;
  --muted: 142 21% 16%;
  --muted-foreground: 45 20% 72%;
  --destructive: 4 70% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 142 18% 25%;
  --card: 142 25% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
.krishna-gradient {
  background:
    radial-gradient(circle at 18% 18%, hsl(var(--secondary) / 0.32), transparent 28%),
    radial-gradient(circle at 84% 8%, hsl(var(--saffron) / 0.24), transparent 28%),
    linear-gradient(135deg, hsl(var(--primary)), hsl(142 48% 20%));
}
.lotus-card {
  background:
    linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted) / 0.55));
  box-shadow: var(--shadow-sm);
}
.safe-bottom { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--muted)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.accent { color: hsl(var(--secondary)); }