@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap");
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);

  --color-cream-50: #FFFBF5;
  --color-cream-100: #FFF6E9;
  --color-cream-200: #FFECD1;

  --color-warm-50: #FEF9F3;
  --color-warm-100: #FDF0E0;
  --color-warm-200: #FAE0C0;
  --color-warm-300: #F5C78A;
  --color-warm-400: #EDA94E;
  --color-warm-500: #E08A1E;
  --color-warm-600: #C87314;
  --color-warm-700: #A65C12;
  --color-warm-800: #874A14;
  --color-warm-900: #6E3D14;

  --animate-fade-in: fade-in 0.6s ease-out both;
  --animate-fade-in-up: fade-in-up 0.6s ease-out both;
  --animate-fade-in-up-delay-1: fade-in-up 0.6s ease-out 0.1s both;
  --animate-fade-in-up-delay-2: fade-in-up 0.6s ease-out 0.2s both;
  --animate-fade-in-up-delay-3: fade-in-up 0.6s ease-out 0.3s both;
  --animate-scale-in: scale-in 0.3s ease-out both;
  --animate-float: float 3s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* CSS entry animations — replaces JS-driven fade-in for new DOM elements */
.enter-fade {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

  @starting-style {
    opacity: 0;
  }
}

.enter-fade-up {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

  @starting-style {
    opacity: 0;
    transform: translateY(16px);
  }
}

.enter-scale {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;

  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Warm scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-cream-50); }
::-webkit-scrollbar-thumb { background: var(--color-warm-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-warm-400); }

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-warm-300) var(--color-cream-50);
}
.dark {
  scrollbar-color: #4b5563 #111827;
}

/* Hide broken image indicators */
img[src]::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: inherit;
}

img {
  border: none;
  outline: none;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Confetti fall */
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Print styles */
@media print {
  header, footer, nav, .no-print,
  [data-controller="toast"],
  [data-controller="confetti"] { display: none !important; }

  body { background: white !important; color: black !important; font-size: 12pt; }
  main { padding: 0 !important; }

  a { text-decoration: none !important; color: inherit !important; }
  .shadow-sm, .shadow-md, .shadow-lg { box-shadow: none !important; }
  .ring-1, .ring-2 { box-shadow: none !important; border: 1px solid #ddd !important; }

  img { max-height: 300px; object-fit: contain; }
}

/* Selection color */
::selection {
  background-color: var(--color-warm-200);
  color: var(--color-warm-900);
}

/* Keyboard focus indicators */
:focus-visible {
  outline: 2px solid var(--color-warm-500);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-warm-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scroll */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* View Transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: 0.15s ease-in both fade-out;
}
::view-transition-new(root) {
  animation: 0.2s ease-out both fade-in;
}

/* Turbo progress bar */
.turbo-progress-bar {
  background: linear-gradient(90deg, var(--color-warm-400), var(--color-warm-600));
  height: 3px;
}

/* Button ripple */
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

.ripple-circle {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  width: 20px;
  height: 20px;
  transform: scale(0);
  animation: ripple-expand 0.5s ease-out forwards;
  pointer-events: none;
}

/* Heart pop */
@keyframes heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.heart-pop { animation: heart-pop 0.4s ease-out; }

/* Ingredient check animation */
.ingredient-checked {
  text-decoration: line-through;
  text-decoration-color: var(--color-warm-400);
  opacity: 0.4;
  transform: translateX(4px);
}

/* Seasonal accent overrides */
[data-season="spring"] {
  --color-warm-400: #6EE7B7;
  --color-warm-500: #34D399;
  --color-warm-600: #10B981;
}

[data-season="summer"] {
  --color-warm-400: #FBBF24;
  --color-warm-500: #F59E0B;
  --color-warm-600: #D97706;
}

/* autumn is the default palette — no override needed */

[data-season="winter"] {
  --color-warm-400: #93C5FD;
  --color-warm-500: #60A5FA;
  --color-warm-600: #3B82F6;
}

/* Tag badge category colors */
.tag-cuisine { background-color: #DBEAFE; color: #1E40AF; }
.dark .tag-cuisine { background-color: #1E3A5F; color: #93C5FD; }
.tag-protein { background-color: #FEE2E2; color: #991B1B; }
.dark .tag-protein { background-color: #5F1E1E; color: #FCA5A5; }
.tag-cooking_method { background-color: #F3E8FF; color: #6B21A8; }
.dark .tag-cooking_method { background-color: #3B1E5F; color: #D8B4FE; }
.tag-meal_type { background-color: #D1FAE5; color: #065F46; }
.dark .tag-meal_type { background-color: #1E3F2E; color: #6EE7B7; }
.tag-diet { background-color: #CCFBF1; color: #115E59; }
.dark .tag-diet { background-color: #1E3F3B; color: #5EEAD4; }
.tag-occasion { background-color: #FCE7F3; color: #9D174D; }
.dark .tag-occasion { background-color: #5F1E3A; color: #F9A8D4; }

/* Enable class-based dark mode (activated by .dark on <html>) */
@custom-variant dark (&:where(.dark, .dark *));

/* Dark mode overrides for custom classes */
.dark .skeleton-shimmer {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

.dark ::-webkit-scrollbar-track { background: #111827; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

.dark ::selection {
  background-color: #92400e;
  color: #fef3c7;
}