:root {
  --background: 42 38% 95%;
  --foreground: 142 18% 13%;
  --primary: 154 48% 30%;
  --primary-foreground: 0 0% 100%;
  --secondary: 35 52% 84%;
  --secondary-foreground: 142 18% 13%;
  --muted: 42 22% 86%;
  --muted-foreground: 145 9% 38%;
  --destructive: 5 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 42 22% 78%;
  --card: 40 46% 98%;
  --shadow-sm: 0 6px 18px hsl(142 18% 13% / 0.08);
  --shadow-md: 0 14px 36px hsl(142 18% 13% / 0.11);
  --shadow-lg: 0 24px 70px hsl(142 18% 13% / 0.14);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.7rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 150 22% 9%;
  --foreground: 42 38% 94%;
  --primary: 151 50% 58%;
  --primary-foreground: 150 22% 9%;
  --secondary: 154 20% 20%;
  --secondary-foreground: 42 38% 94%;
  --muted: 154 15% 18%;
  --muted-foreground: 42 18% 72%;
  --destructive: 5 70% 62%;
  --destructive-foreground: 150 22% 9%;
  --border: 154 15% 24%;
  --card: 150 22% 12%;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 8%, hsl(var(--primary) / 0.16), transparent 28rem),
    radial-gradient(circle at 92% 18%, hsl(var(--secondary) / 0.8), transparent 24rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
button, input, textarea, select { font: inherit; }

.hero-card { position: relative; }
.hero-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  pointer-events: none;
}

.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 0.9rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nav-link:hover { background: hsl(var(--secondary) / 0.7); transform: translateY(-1px); }

.field {
  min-height: 50px;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.58);
  padding: 0.85rem 1rem;
  color: hsl(var(--foreground));
  font-size: max(16px, 1rem);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.field:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
  background: hsl(var(--card));
}
textarea.field { resize: vertical; }

.primary-button, .secondary-button, .mode-tab, .choice-card, .date-button, .slot-button, .link-button {
  min-height: 44px;
  touch-action: manipulation;
}
.primary-button {
  width: 100%;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: white;
  padding: 0.9rem 1.1rem;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.primary-button:disabled { opacity: 0.62; cursor: not-allowed; }

.secondary-button {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--secondary) / 0.55);
  padding: 0.75rem 1rem;
  font-weight: 850;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.secondary-button:hover:not(:disabled) { transform: translateY(-1px); background: hsl(var(--secondary)); }
.secondary-button:disabled { opacity: 0.62; cursor: not-allowed; }

.link-button {
  width: 100%;
  border-radius: var(--radius-md);
  color: hsl(var(--primary));
  font-weight: 800;
}

.mode-tab {
  border-radius: var(--radius-sm);
  background: hsl(var(--secondary) / 0.36);
  padding: 0.62rem 0.5rem;
  font-size: 0.86rem;
  font-weight: 850;
  color: hsl(var(--muted-foreground));
}
.mode-tab-active { background: hsl(var(--primary)); color: white; }

.choice-card {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.choice-card:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / 0.55); }
.choice-card-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.09); }

.date-button, .slot-button {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background) / 0.58);
  padding: 0.85rem 0.7rem;
  font-weight: 850;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.date-button:hover, .slot-button:hover { transform: translateY(-1px); border-color: hsl(var(--primary) / 0.55); }
.date-button-active, .slot-button-active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: white; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}