@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;
}

/* === Theme overrides — swap warm-* accent palette per user theme === */
[data-theme="ocean"] {
  --color-warm-50: #EFF6FF;
  --color-warm-100: #DBEAFE;
  --color-warm-200: #BFDBFE;
  --color-warm-300: #93C5FD;
  --color-warm-400: #60A5FA;
  --color-warm-500: #3B82F6;
  --color-warm-600: #2563EB;
  --color-warm-700: #1D4ED8;
  --color-warm-800: #1E40AF;
  --color-warm-900: #1E3A8A;
}

[data-theme="forest"] {
  --color-warm-50: #ECFDF5;
  --color-warm-100: #D1FAE5;
  --color-warm-200: #A7F3D0;
  --color-warm-300: #6EE7B7;
  --color-warm-400: #34D399;
  --color-warm-500: #10B981;
  --color-warm-600: #059669;
  --color-warm-700: #047857;
  --color-warm-800: #065F46;
  --color-warm-900: #064E3B;
}

[data-theme="sunset"] {
  --color-warm-50: #FFF7ED;
  --color-warm-100: #FFEDD5;
  --color-warm-200: #FED7AA;
  --color-warm-300: #FDBA74;
  --color-warm-400: #FB923C;
  --color-warm-500: #F97316;
  --color-warm-600: #EA580C;
  --color-warm-700: #C2410C;
  --color-warm-800: #9A3412;
  --color-warm-900: #7C2D12;
}

[data-theme="berry"] {
  --color-warm-50: #FAF5FF;
  --color-warm-100: #F3E8FF;
  --color-warm-200: #E9D5FF;
  --color-warm-300: #D8B4FE;
  --color-warm-400: #C084FC;
  --color-warm-500: #A855F7;
  --color-warm-600: #9333EA;
  --color-warm-700: #7E22CE;
  --color-warm-800: #6B21A8;
  --color-warm-900: #581C87;
}

[data-theme="slate"] {
  --color-warm-50: #F8FAFC;
  --color-warm-100: #F1F5F9;
  --color-warm-200: #E2E8F0;
  --color-warm-300: #CBD5E1;
  --color-warm-400: #94A3B8;
  --color-warm-500: #64748B;
  --color-warm-600: #475569;
  --color-warm-700: #334155;
  --color-warm-800: #1E293B;
  --color-warm-900: #0F172A;
}

/* "warm" is the default — no override needed */

/* Theme-aware form controls — warm fill with white checkmark/dot */
[type="checkbox"]:checked {
  background-color: var(--color-warm-500) !important;
  border-color: var(--color-warm-500) !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
[type="radio"]:checked {
  background-color: var(--color-warm-500) !important;
  border-color: var(--color-warm-500) !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important;
}


@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); }
}

.grocery-item-new {
  animation: grocery-highlight 10s ease-out;
  border-left: 3px solid theme(colors.green.400);
  background-color: theme(colors.green.50);
}

/* Subtle pulse for week strip swap hint */
.animate-pulse-subtle { animation: pulse-subtle 1.5s ease-in-out infinite; }
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes grocery-highlight {
  0%, 70% {
    background-color: theme(colors.green.50);
    border-left-color: theme(colors.green.400);
  }
  100% {
    background-color: transparent;
    border-left-color: transparent;
  }
}

@media (prefers-color-scheme: dark) {
  .grocery-item-new {
    background-color: theme(colors.green.900 / 20%);
    border-left-color: theme(colors.green.600);
  }

  @keyframes grocery-highlight {
    0%, 70% {
      background-color: theme(colors.green.900 / 20%);
      border-left-color: theme(colors.green.600);
    }
    100% {
      background-color: transparent;
      border-left-color: transparent;
    }
  }
}

.animate-scan-progress {
  animation: scan-progress 30s ease-out forwards;
}

@keyframes scan-progress {
  0% { width: 0%; }
  20% { width: 30%; }
  50% { width: 60%; }
  80% { width: 85%; }
  100% { width: 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 scrollbar on horizontal scroll strips */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* 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 {
  /* Hide non-content elements */
  header, footer, nav, .no-print,
  [data-controller="toast"],
  [data-controller="confetti"],
  [data-controller="bottom-sheet"],
  .sticky { display: none !important; }

  /* Reset page */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }
  main { padding: 0 !important; }
  * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }

  /* Clean up links and decorations */
  a { text-decoration: none !important; color: inherit !important; }
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
  .ring-1, .ring-2 { box-shadow: none !important; border: none !important; }
  .rounded-2xl, .rounded-xl { border-radius: 0 !important; }
  .backdrop-blur-sm, .backdrop-blur-lg { backdrop-filter: none !important; }

  /* Recipe hero image — keep small so content fits on page */
  img { max-height: 150px !important; object-fit: cover !important; }
  .h-56, .sm\:h-72, .lg\:h-96 { height: 150px !important; }

  /* Ensure all content is visible — no clipping */
  div, section, main, article { overflow: visible !important; max-height: none !important; }

  /* Force single column */
  .lg\:grid, .lg\:grid-cols-12 { display: block !important; }
  .lg\:col-span-7, .xl\:col-span-8,
  .lg\:col-span-5, .xl\:col-span-4 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure ingredients and directions are visible */
  #ingredients, #directions {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    user-select: auto !important;
    max-height: none !important;
  }

  /* Remove blur from recipe content */
  .blur-sm { filter: none !important; }
  .select-none { user-select: auto !important; }
  .pointer-events-none { pointer-events: auto !important; }
  .overflow-hidden { overflow: visible !important; }

  /* Hide the request overlay in print */
  .absolute.inset-0.z-10 { display: none !important; }

  /* Recipe title */
  .font-display { font-family: Georgia, serif !important; }
  h1 { font-size: 22pt !important; margin-bottom: 4pt !important; }

  /* Ingredients and directions */
  #ingredients, #directions {
    border: none !important;
    padding: 0 !important;
    margin-top: 16pt !important;
    break-inside: avoid;
  }

  #ingredients ul { columns: 2; column-gap: 24pt; }
  #ingredients li {
    break-inside: avoid;
    padding: 2pt 0 !important;
    border: none !important;
  }

  #directions ol li, #directions ul li {
    break-inside: avoid;
    padding: 4pt 0 !important;
  }

  /* Section headers */
  #ingredients h2, #directions h2 {
    font-size: 11pt !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 4pt !important;
    margin-bottom: 8pt !important;
  }

  /* Recipe meta (time, servings, difficulty) */
  .text-warm-600, .text-warm-700 { color: #666 !important; }

  /* Notes section */
  #notes { margin-top: 16pt !important; break-inside: avoid; }
  #notes details { display: none !important; }
  #notes p { border: 1px solid #eee !important; padding: 8pt !important; }

  /* Hide interactive elements in print */

  /* Tags as simple text */
  .rounded-full[class*="tag-"] {
    background: none !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
  }

  /* Footer with source */
  @page {
    margin: 0.75in;
    @bottom-center { content: "recidex.app"; font-size: 8pt; color: #999; }
  }
}

/* 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;
}


/* 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;
}