@import "tailwindcss";

:root {
  --background: #fdf6f3;
  --foreground: #2b1d2e;
  --surface: #ffffff;
  --surface-muted: #fbeee9;
  --border: #f3d9d0;
  --primary: #ec4899;
  --primary-hover: #db2777;
  --primary-foreground: #ffffff;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --rose-50: #fff1f5;
  --rose-100: #ffe4ec;
  --rose-200: #fecdd9;
  --rose-300: #fda4c0;
  --rose-400: #fb729e;
  --rose-500: #ec4899;
  --rose-600: #db2777;
  --rose-700: #be185d;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --danger: #e11d48;
  --danger-foreground: #ffffff;
  --success: #16a34a;
  --muted: #7c5a6a;
  --ring: rgba(236, 72, 153, 0.35);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-danger: var(--danger);
  --color-danger-foreground: var(--danger-foreground);
  --color-success: var(--success);
  --color-muted: var(--muted);
  --color-ring: var(--ring);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-rose-50: var(--rose-50);
  --color-rose-100: var(--rose-100);
  --color-rose-200: var(--rose-200);
  --color-rose-300: var(--rose-300);
  --color-rose-400: var(--rose-400);
  --color-rose-500: var(--rose-500);
  --color-rose-600: var(--rose-600);
  --color-rose-700: var(--rose-700);
  --color-amber-300: var(--amber-300);
  --color-amber-400: var(--amber-400);
  --color-amber-500: var(--amber-500);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html,
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 6px;
}

@keyframes heart-float {
  0% {
    transform: translate(-50%, -50%) scale(0.85) rotate(-6deg);
    opacity: 0.1;
  }
  20% {
    opacity: 0.45;
  }
  50% {
    transform: translate(calc(-50% + var(--drift, 0px)), -65%) scale(1.1) rotate(6deg);
    opacity: 0.55;
  }
  80% {
    opacity: 0.35;
  }
  100% {
    transform: translate(calc(-50% - var(--drift, 0px)), -50%) scale(0.95) rotate(-4deg);
    opacity: 0.15;
  }
}

.floating-heart {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translate(-50%, -50%);
  filter: blur(6px);
  opacity: 0.5;
  pointer-events: none;
  animation: heart-float ease-in-out infinite;
}

.navbar-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--rose-100);
  box-shadow: 0 12px 40px -22px rgba(190, 24, 93, 0.45);
}

.navbar-hero {
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(252, 165, 165, 0.45), transparent 70%),
    radial-gradient(700px 240px at 85% 0%, rgba(252, 211, 77, 0.35), transparent 70%),
    radial-gradient(600px 200px at 50% 100%, rgba(251, 113, 133, 0.25), transparent 70%),
    linear-gradient(180deg, #fff7f3 0%, #fff1ec 100%);
}

.navbar-topbar {
  background: linear-gradient(90deg, rgba(76, 29, 58, 0.85) 0%, rgba(131, 24, 67, 0.85) 40%, rgba(190, 24, 93, 0.85) 70%, rgba(157, 23, 77, 0.85) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-mainbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid rgba(244, 114, 182, 0.08);
}