:root {
  color-scheme: light;
  --bg-start: #f8f2f4;
  --bg-mid: #f4ecef;
  --bg-end: #eee8f3;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-border: rgba(255, 255, 255, 0.62);
  --text-main: #2f2934;
  --text-soft: #6d6073;
  --accent: #b07c97;
  --accent-strong: #8e5f79;
  --beige: #f1e7dc;
  --heart-color: rgba(169, 116, 143, 0.12);
  --shadow-soft: 0 1.2rem 2.6rem rgba(90, 63, 86, 0.12);
  --shadow-card: 0 1.2rem 3rem rgba(96, 67, 90, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --control-surface: rgba(255, 255, 255, 0.84);
  --control-border: rgba(205, 177, 196, 0.35);
  --control-shadow: 0 0.7rem 1.4rem rgba(72, 50, 71, 0.13);
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --space-2: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --space-3: clamp(0.75rem, 0.65rem + 0.4vw, 0.9rem);
  --space-4: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  --space-5: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --space-6: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --space-8: clamp(2rem, 1.4rem + 2.5vw, 3rem);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-start: #17131d;
  --bg-mid: #1f1826;
  --bg-end: #241f2e;
  --surface: rgba(37, 30, 45, 0.74);
  --surface-border: rgba(255, 255, 255, 0.11);
  --text-main: #f4edf8;
  --text-soft: #c7b9d1;
  --accent: #d09ab7;
  --accent-strong: #ebb8d2;
  --beige: #2a2130;
  --heart-color: rgba(228, 178, 205, 0.14);
  --shadow-soft: 0 1.3rem 2.8rem rgba(8, 6, 12, 0.5);
  --shadow-card: 0 1.4rem 3rem rgba(7, 6, 11, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --control-surface: rgba(49, 39, 58, 0.88);
  --control-border: rgba(255, 255, 255, 0.15);
  --control-shadow: 0 0.8rem 1.6rem rgba(5, 4, 9, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.page {
  min-height: 100svh;
  font-family: "Poppins", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(90vw 46vh at 8% -12%, rgba(194, 151, 174, 0.18), transparent 60%),
    radial-gradient(82vw 40vh at 95% 102%, rgba(159, 137, 184, 0.16), transparent 62%),
    linear-gradient(155deg, var(--bg-start), var(--bg-mid) 46%, var(--beige) 70%, var(--bg-end));
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

.container {
  width: min(100% - 1.5rem, 68rem);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(0.75rem) saturate(1.06);
  border-radius: var(--radius-lg);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent-strong);
  font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.92;
}

.title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.75rem, 1.25rem + 2.8vw, 3rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.06rem);
  line-height: 1.75;
}

.primary-btn,
.mood-btn {
  font: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.2;
  min-height: 2.9rem;
  transition:
    box-shadow 0.4s var(--ease-soft),
    background-color 0.35s var(--ease-soft),
    border-color 0.35s var(--ease-soft),
    filter 0.35s var(--ease-soft);
}

.primary-btn:hover,
.mood-btn:hover {
  box-shadow: 0 0.9rem 1.8rem rgba(139, 96, 120, 0.18);
  filter: brightness(1.02);
}

.primary-btn:focus-visible,
.mood-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

/* Page transitions */
.page-fade {
  animation: pageFadeIn 0.7s var(--ease-soft) both;
}

.page-exit {
  animation: pageExit 0.3s var(--ease-soft) both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pageExit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Decorative hearts */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.heart {
  position: absolute;
  width: clamp(0.44rem, 0.38rem + 0.2vw, 0.62rem);
  aspect-ratio: 1;
  background: var(--heart-color);
  transform: rotate(45deg);
  animation: heartDrift 18s linear infinite;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.heart::before { inset: -50% auto auto 0; }
.heart::after { inset: 0 auto auto -50%; }

.h1 { left: 8%; animation-delay: 0s; }
.h2 { left: 20%; animation-delay: 2.4s; }
.h3 { left: 32%; animation-delay: 4s; }
.h4 { left: 46%; animation-delay: 1.6s; }
.h5 { left: 60%; animation-delay: 5.4s; }
.h6 { left: 72%; animation-delay: 3.1s; }
.h7 { left: 84%; animation-delay: 4.8s; }
.h8 { left: 92%; animation-delay: 6.8s; }

@keyframes heartDrift {
  0% {
    transform: translateY(108vh) rotate(45deg) scale(0.78);
    opacity: 0;
  }
  12% { opacity: 0.22; }
  88% { opacity: 0.16; }
  100% {
    transform: translateY(-12vh) rotate(45deg) scale(1.04);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - 1rem, 68rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .page-fade,
  .page-exit,
  .heart {
    animation: none !important;
  }

  .primary-btn,
  .mood-btn {
    transition: none !important;
  }
}