@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-rose: var(--rose);
  --color-blush: var(--blush);
  --color-petal: var(--petal);
  --color-gold: var(--gold);
  --color-plum: var(--plum);

  --font-script: "Great Vibes", cursive;
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

:root {
  --radius: 0.875rem;

  /* Romantic blush palette */
  --background: oklch(0.97 0.025 350);
  --foreground: oklch(0.22 0.06 320);

  --card: oklch(0.995 0.008 340);
  --card-foreground: oklch(0.22 0.06 320);

  --popover: oklch(0.99 0.01 340);
  --popover-foreground: oklch(0.22 0.06 320);

  --primary: oklch(0.7 0.22 0);            /* hot pink */
  --primary-foreground: oklch(0.99 0.005 340);

  --secondary: oklch(0.94 0.04 340);
  --secondary-foreground: oklch(0.25 0.07 320);

  --muted: oklch(0.95 0.025 340);
  --muted-foreground: oklch(0.5 0.04 330);

  --accent: oklch(0.88 0.09 350);
  --accent-foreground: oklch(0.25 0.07 320);

  --destructive: oklch(0.62 0.22 25);
  --destructive-foreground: oklch(0.99 0.005 340);

  --border: oklch(0.9 0.03 340);
  --input: oklch(0.92 0.03 340);
  --ring: oklch(0.75 0.18 350);

  --rose: oklch(0.7 0.22 0);
  --blush: oklch(0.92 0.05 350);
  --petal: oklch(0.85 0.1 340);
  --gold: oklch(0.85 0.15 75);
  --plum: oklch(0.25 0.08 320);

  --gradient-script: linear-gradient(110deg,
    oklch(0.72 0.22 0) 0%,
    oklch(0.78 0.2 350) 35%,
    oklch(0.82 0.18 50) 100%);
  --gradient-button: linear-gradient(120deg,
    oklch(0.74 0.22 0),
    oklch(0.7 0.22 330));
  --gradient-page: linear-gradient(135deg,
    oklch(0.96 0.04 350) 0%,
    oklch(0.94 0.05 340) 50%,
    oklch(0.92 0.06 310) 100%);
  --gradient-night: radial-gradient(ellipse at top,
    oklch(0.32 0.1 320) 0%,
    oklch(0.18 0.08 320) 60%,
    oklch(0.12 0.06 310) 100%);

  --shadow-soft: 0 20px 60px -20px oklch(0.7 0.2 340 / 0.35);
  --shadow-card: 0 12px 30px -10px oklch(0.5 0.15 320 / 0.25);
  --shadow-glow: 0 0 40px oklch(0.78 0.2 350 / 0.5);
}

.dark {
  --background: oklch(0.18 0.06 320);
  --foreground: oklch(0.97 0.02 340);
  --card: oklch(0.22 0.07 320);
  --card-foreground: oklch(0.97 0.02 340);
  --popover: oklch(0.22 0.07 320);
  --popover-foreground: oklch(0.97 0.02 340);
  --primary: oklch(0.78 0.2 350);
  --primary-foreground: oklch(0.18 0.06 320);
  --secondary: oklch(0.28 0.06 320);
  --secondary-foreground: oklch(0.97 0.02 340);
  --muted: oklch(0.28 0.06 320);
  --muted-foreground: oklch(0.75 0.04 330);
  --accent: oklch(0.32 0.08 330);
  --accent-foreground: oklch(0.97 0.02 340);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.78 0.2 350);
}

@layer base {
  * { border-color: var(--color-border); }
  html, body { height: 100%; }
  body {
    background: var(--gradient-page);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
}

/* === Utilities === */
.font-script { font-family: var(--font-script); }
.font-serif  { font-family: var(--font-serif); font-weight: 500; }

.text-gradient {
  background: var(--gradient-script);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px oklch(0.78 0.2 350 / 0.35));
}

.bg-gradient-button { background: var(--gradient-button); }
.bg-gradient-page   { background: var(--gradient-page); }
.bg-gradient-night  { background: var(--gradient-night); }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* === Animations === */
@keyframes float-up {
  0%   { transform: translateY(100vh) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-10vh) scale(1.1); opacity: 0; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 20px oklch(0.85 0.15 350 / 0.6), 0 0 40px oklch(0.78 0.2 350 / 0.4); }
  50%      { text-shadow: 0 0 30px oklch(0.9 0.18 350 / 0.9), 0 0 60px oklch(0.78 0.22 350 / 0.6); }
}
@keyframes card-in {
  0%   { opacity: 0; transform: translateY(40px) rotateY(-25deg) scale(0.85); }
  100% { opacity: 1; transform: var(--tilt, rotate(0deg)) scale(1); }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.2; }
}
@keyframes fade-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.7s ease-out both; }
.animate-card-in { animation: card-in 0.9s cubic-bezier(.2,.8,.2,1) both; }

/* Polaroid card */
.polaroid {
  background: white;
  padding: 12px 12px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
}
.polaroid:hover {
  transform: translateY(-10px) rotateX(6deg) rotateY(-4deg) scale(1.04);
  box-shadow: 0 30px 60px -20px oklch(0.55 0.18 330 / 0.45);
}
.polaroid img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Heart float */
.heart {
  position: absolute;
  font-size: 22px;
  animation: float-up linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px oklch(0.7 0.2 350 / 0.4));
}
.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px white, 0 0 20px oklch(0.85 0.15 75);
  animation: sparkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.confetti-piece {
  position: absolute;
  top: -10vh;
  width: 10px; height: 16px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
  pointer-events: none;
}