:root {
  --bg: #fff5fb;
  --card: rgba(255,255,255,0.92);
  --text: #2b2b2b;
  --muted: rgba(43,43,43,0.70);
  --accent: #ff4da6;
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 45px rgba(0,0,0,0.12);
  --paper: rgba(255,255,255,0.92);
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(255,77,166,0.14), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255,180,210,0.18), transparent 42%),
    radial-gradient(circle at 30% 90%, rgba(255,77,166,0.10), transparent 45%),
    var(--bg);
}

.nav { background: rgba(255,255,255,0.82); }

.pill, .btn { background: rgba(255,255,255,0.92); }

.btn-accent {
  border-color: rgba(255,77,166,0.55);
  background: rgba(255,77,166,0.12);
}

.brand .pill {
  border-color: rgba(255,77,166,0.35);
}

.card {
  border-color: rgba(255,77,166,0.18);
}

.card::after {
  content: "✿";
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 18px;
  opacity: 0.35;
  transform: rotate(12deg);
  pointer-events: none;
}

h1 {
  text-shadow: 0 12px 30px rgba(255,77,166,0.18);
}

.pill::before {
  content: "🎀";
}

