:root {
  --background: 258 42% 96%;
  --foreground: 252 37% 10%;
  --primary: 326 92% 55%;
  --secondary: 248 55% 89%;
  --muted: 252 13% 43%;
  --destructive: 0 86% 58%;
  --border: 252 28% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px hsl(252 37% 10% / 0.08);
  --shadow-md: 0 18px 44px hsl(326 92% 55% / 0.25);
  --shadow-lg: 0 30px 90px hsl(252 37% 10% / 0.22);
  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 252 38% 7%;
  --foreground: 258 35% 96%;
  --primary: 326 92% 62%;
  --secondary: 252 28% 16%;
  --muted: 255 16% 70%;
  --destructive: 0 86% 62%;
  --border: 252 22% 22%;
  --card: 252 34% 11%;
  --shadow-sm: 0 10px 30px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 18px 44px hsl(326 92% 55% / 0.22);
  --shadow-lg: 0 30px 90px hsl(0 0% 0% / 0.45);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button, a, textarea {
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

button:active {
  transform: scale(0.96);
}

.aurora-bg {
  background:
    radial-gradient(circle at 18% 16%, hsl(326 92% 70% / 0.38), transparent 31%),
    radial-gradient(circle at 82% 18%, hsl(197 96% 61% / 0.30), transparent 28%),
    radial-gradient(circle at 52% 90%, hsl(266 92% 66% / 0.32), transparent 34%),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary) / 0.55));
  filter: saturate(1.05);
}

.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  border-radius: 2.2rem;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.12), inset 0 -40px 80px hsl(0 0% 0% / 0.24);
}

.record-button {
  box-shadow: 0 0 0 9px hsl(0 0% 100% / 0.12), 0 16px 42px hsl(326 92% 55% / 0.38);
}

.record-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 12px hsl(0 0% 100% / 0.15), 0 22px 55px hsl(326 92% 55% / 0.48);
}

textarea::placeholder {
  color: hsl(0 0% 100% / 0.45);
}

@media (max-width: 374px) {
  .phone-shell {
    border-radius: 1.7rem;
  }
}