:root {
  --blush: #ffd9d0;
  --peach: #ffe0b8;
  --gold: #ffd27a;
  --lav: #e7d4f0;
  --rose: #e05a7a;
}

* { box-sizing: border-box; }

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

.greeting-font { font-family: "Dancing Script", cursive; }
.body-font { font-family: "Cormorant Garamond", serif; }

.app-root {
  background: linear-gradient(135deg, #fff2e0 0%, #ffe0d6 30%, #ffd6e2 60%, #ece0f5 100%);
  background-size: 300% 300%;
  animation: skyshift 18s ease-in-out infinite;
  color: #4a3b3b;
}

@keyframes skyshift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Sun ---- */
.sun-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sun {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6c9, #ffd166 55%, #ffb347 100%);
  box-shadow: 0 0 40px 12px rgba(255, 190, 90, 0.55),
              0 0 90px 30px rgba(255, 210, 120, 0.35);
  animation: sunpulse 4s ease-in-out infinite;
  z-index: 2;
}
.sun-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,209,102,0.55) 0deg 8deg, transparent 8deg 30deg,
      rgba(255,209,102,0.55) 30deg 38deg, transparent 38deg 60deg,
      rgba(255,209,102,0.55) 60deg 68deg, transparent 68deg 90deg,
      rgba(255,209,102,0.55) 90deg 98deg, transparent 98deg 120deg,
      rgba(255,209,102,0.55) 120deg 128deg, transparent 128deg 150deg,
      rgba(255,209,102,0.55) 150deg 158deg, transparent 158deg 180deg,
      rgba(255,209,102,0.55) 180deg 188deg, transparent 188deg 210deg,
      rgba(255,209,102,0.55) 210deg 218deg, transparent 218deg 240deg,
      rgba(255,209,102,0.55) 240deg 248deg, transparent 248deg 270deg,
      rgba(255,209,102,0.55) 270deg 278deg, transparent 278deg 300deg,
      rgba(255,209,102,0.55) 300deg 308deg, transparent 308deg 330deg,
      rgba(255,209,102,0.55) 330deg 338deg, transparent 338deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 46px, #000 47px);
          mask: radial-gradient(circle, transparent 46px, #000 47px);
  animation: spin 40s linear infinite;
  opacity: 0.7;
}
@keyframes sunpulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Cards & buttons ---- */
.msg-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 45px -20px rgba(224, 90, 122, 0.45);
}

.btn-primary {
  background: linear-gradient(135deg, #ff7a9a, #ff9d76);
  box-shadow: 0 8px 20px -8px rgba(255, 100, 130, 0.7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 26px -8px rgba(255, 100, 130, 0.85);
}
.btn-primary:active { transform: scale(.97); }

.btn-ai {
  background: rgba(255, 255, 255, 0.7);
  color: #b45a2b;
  border: 1px solid rgba(255, 180, 120, 0.8);
  transition: transform .15s ease, background .15s ease;
}
.btn-ai:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255, 245, 230, 0.95);
}
.btn-ai:disabled { opacity: .6; cursor: wait; }

/* ---- Message fade ---- */
.msg-text { animation: msgfade .6s ease both; }
@keyframes msgfade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Page load reveals ---- */
.fade-up { animation: fadeUp .8s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Floating hearts ---- */
.float-heart {
  animation-name: floatUp;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -220px) scale(1.1) rotate(15deg); }
}

/* ---- Toast ---- */
.toast { animation: toastIn .3s ease both; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.tabular-nums { font-variant-numeric: tabular-nums; }