@import "tailwindcss";

/* ── Cutesy Sakura Theme ────────────────────────────────────────────── */
:root {
  --bg: #fff7fb;
  --bg-2: #ffeaf3;
  --bg-3: #fdf3ff;
  --surface: #ffffff;
  --surface-soft: #fff0f7;

  --pink-50:  #fff1f7;
  --pink-100: #ffd9e9;
  --pink-200: #ffbcd6;
  --pink-300: #ff9ec0;
  --pink-400: #ff7aa9;
  --pink-500: #ff5d96;
  --pink-600: #e6447e;

  --lavender:   #e8d5ff;
  --lavender-2: #c8a6ff;
  --mint:       #b8f0d4;
  --peach:      #ffd4a8;
  --sky:        #c5e4ff;
  --lemon:      #fff2b8;

  --ink:       #3a2a3a;
  --ink-soft:  #6b5267;
  --ink-mute:  #9b86a0;

  --border:        #ffd9e9;
  --border-strong: #ffbcd6;

  --shadow-pink-sm: 0 4px 14px rgba(255, 138, 179, 0.18);
  --shadow-pink-md: 0 10px 28px rgba(255, 138, 179, 0.22);
  --shadow-pink-lg: 0 18px 44px rgba(255, 93, 150, 0.25);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--ink);
  /* The actual loaded font name is injected by `next/font` via _app.js,
     which overrides `--font-sans` at :root. This declaration is the
     fallback if that override isn't applied yet. */
  --font-sans: 'Quicksand', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Keep light theme even when OS is dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #fff7fb;
    --ink: #3a2a3a;
  }
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1200px 700px at 0% -10%, var(--bg-2) 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, var(--bg-3) 0%, transparent 55%),
    radial-gradient(900px 500px at 50% 110%, var(--pink-50) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Sakura petals — static background (no animation). The previous version
   animated `background-position` on a fixed full-viewport pseudo-element,
   which forces full-layer repaints at 60 fps and tanks battery on mobile.
   The pattern alone is plenty visually.
   `prefers-reduced-motion` will, predictably, not animate either. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255, 188, 214, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 38%, rgba(232, 213, 255, 0.4) 0 5px, transparent 6px),
    radial-gradient(circle at 38% 78%, rgba(255, 212, 168, 0.35) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 88%, rgba(255, 188, 214, 0.3) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 60%, rgba(184, 240, 212, 0.3) 0 4px, transparent 5px);
  background-size: 700px 700px;
  opacity: 0.55;
  z-index: 0;
}

/* ── Reusable surfaces ───────────────────────────────────────────────── */
.soft-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-pink-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.soft-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-pink-md);
}

.soft-panel {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-pink-sm);
}

.lift-on-hover {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pink-md);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--pink-400) 0%, var(--pink-500) 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px rgba(255, 93, 150, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(255, 93, 150, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: saturate(1.05);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }

.btn-soft {
  background: var(--surface);
  color: var(--pink-600);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-soft:hover {
  background: var(--pink-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-pink-sm);
}

.btn-ghost {
  color: var(--ink-soft);
  background: transparent;
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-ghost:hover { background: var(--pink-50); color: var(--pink-600); }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.cute-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  padding: 0.7rem 1.1rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.cute-input::placeholder { color: var(--ink-mute); }
.cute-input:focus {
  outline: none;
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px rgba(255, 138, 179, 0.18), var(--shadow-pink-sm);
}

/* Pretty range slider */
input[type="range"].cute-range {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--pink-200), var(--lavender));
  outline: none;
  cursor: pointer;
}
input[type="range"].cute-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-500);
  box-shadow: 0 4px 10px rgba(255, 93, 150, 0.35);
  transition: transform 0.2s var(--ease);
}
input[type="range"].cute-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].cute-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-500);
  box-shadow: 0 4px 10px rgba(255, 93, 150, 0.35);
}

/* Pretty checkbox */
.cute-checkbox {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.25s var(--ease);
}
.cute-checkbox:checked {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  border-color: var(--pink-500);
  box-shadow: 0 4px 10px rgba(255, 93, 150, 0.3);
}
.cute-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cute-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Chips / tags ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:hover { transform: translateY(-1px); }

.chip-pink     { background: var(--pink-100);  color: var(--pink-600); }
.chip-lavender { background: var(--lavender);  color: #6a3fb1; }
.chip-mint     { background: var(--mint);      color: #1f7a52; }
.chip-peach    { background: var(--peach);     color: #b35f12; }
.chip-sky      { background: var(--sky);       color: #2862a8; }
.chip-lemon    { background: var(--lemon);     color: #8a6a05; }
.chip-soft     { background: var(--surface-soft); color: var(--ink-soft); border: 1px solid var(--border); }

/* Heading flourish */
.heart-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--pink-500) 0%, var(--lavender-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes sparkle {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.15); }
}
@keyframes drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 700px 350px, -700px 350px, 350px 700px, -350px 700px, 700px -350px; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in-up { animation: fade-in-up 0.55s var(--ease) both; }
.animate-fade-in    { animation: fade-in 0.5s var(--ease) both; }
.animate-pop-in     { animation: pop-in 0.5s var(--ease) both; }
.animate-float      { animation: float-y 4s ease-in-out infinite; will-change: transform; }
.animate-sparkle    { animation: sparkle 2.4s ease-in-out infinite; }

/* Honor user motion preferences — disables idle infinite loops, keeps
   one-shot fades short so UI still feels responsive. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.delay-75   { animation-delay: 75ms; }
.delay-150  { animation-delay: 150ms; }
.delay-300  { animation-delay: 300ms; }
.delay-500  { animation-delay: 500ms; }

/* Loader — bouncy pink dots */
.cute-loader {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.cute-loader span {
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  border-radius: 50%;
  display: inline-block;
  animation: float-y 0.9s ease-in-out infinite;
}
.cute-loader span:nth-child(2) { animation-delay: 0.15s; background: linear-gradient(135deg, var(--lavender-2), var(--pink-400)); }
.cute-loader span:nth-child(3) { animation-delay: 0.3s;  background: linear-gradient(135deg, var(--peach), var(--pink-400)); }

/* Shimmer for filtering overlay */
.shimmer-bg {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 188, 214, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Pretty scrollbars (webkit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pink-200), var(--lavender));
  border-radius: 9999px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--pink-300), var(--lavender-2)); }

/* Ensure interactive content sits above the petal layer */
#__next, main, .relative-z { position: relative; z-index: 1; }