/* ==========================================================================
   Pare — "Electric Kitchen" Design System Stylesheet
   Palette:
     Electric Pear: #D1FF00 (Primary Brand Signal)
     Vibrant Pink:  #FF33A8 (Secondary / Interactive Accent)
     Deep Forest:   #062C1E (Foundational Text & Outlines)
     Sunset Orange: #FF5C00 (Warnings / Attention / Dietary)
     Surface Paper: #F9FBE5 (Warm Paper Canvas)
     Surface Dim:   #DADCC6
     Containers:    #FFFFFF, #F3F5DF, #EEF0DA, #E8EAD4
   Typography:
     Literata (Hero Headline) & Hanken Grotesk (Body & Functional UI)
   Aesthetic:
     Tactile Neo-Brutalist & Risograph ("Digital Scrapbook", 1.5px-2px Deep Forest outlines, flat offset shadows)
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  background-color: #f9fbe5;
  color: #1a1d10;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Typography Helpers */
.font-hero {
  font-family: 'Literata', Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.font-serif {
  font-family: 'Literata', Georgia, serif;
}

.font-sans {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

/* Screen Visibility Controller */
.screen-view {
  display: none;
}

.screen-view.active {
  display: block;
}

/* Tactile Neo-Brutalist Outlines & Flat Offset Shadows */
.border-forest {
  border: 1.5px solid #062c1e;
}

.border-forest-2 {
  border: 2px solid #062c1e;
}

.shadow-hard-forest {
  box-shadow: 4px 4px 0px #062c1e;
}

.shadow-hard-forest-sm {
  box-shadow: 2px 2px 0px #062c1e;
}

.shadow-hard-forest-lg {
  box-shadow: 6px 6px 0px #062c1e;
}

.shadow-hard-pink {
  box-shadow: 4px 4px 0px #ff33a8;
}

.shadow-hard-pink-sm {
  box-shadow: 2px 2px 0px #ff33a8;
}

.shadow-hard-pear {
  box-shadow: 4px 4px 0px #d1ff00;
}

.shadow-hard-pear-sm {
  box-shadow: 2px 2px 0px #d1ff00;
}

/* Interactive scaling on hover & press */
.card-tactile {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}

.card-tactile:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #062c1e;
}

.card-tactile:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #062c1e;
}

/* Smooth Entrance Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbars */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #eef0da;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
  background: #c5c9ac;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #062c1e;
}

/* Range Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  background: #eef0da;
  height: 8px;
  border-radius: 9999px;
  border: 1.5px solid #062c1e;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d1ff00;
  border: 2px solid #062c1e;
  cursor: pointer;
  box-shadow: 2px 2px 0px #062c1e;
  transition: transform 0.12s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  background: #d1ff00;
}

/* Meal Type Buttons */
.meal-type-btn {
  background-color: #ffffff;
  border: 1.5px solid #062c1e;
  transition: all 0.18s ease;
}
.meal-type-btn:hover {
  background-color: #f3f5df;
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #062c1e;
}
.meal-type-btn.active {
  background-color: #d1ff00 !important;
  border: 2px solid #062c1e !important;
  color: #062c1e !important;
  box-shadow: 4px 4px 0px #062c1e !important;
}

/* Skill Level Buttons */
.skill-btn {
  background-color: #ffffff;
  border: 1.5px solid #062c1e;
  transition: all 0.18s ease;
}
.skill-btn:hover {
  background-color: #f3f5df;
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #062c1e;
}
.skill-btn.active {
  background-color: #d1ff00 !important;
  border: 2px solid #062c1e !important;
  color: #062c1e !important;
  box-shadow: 4px 4px 0px #062c1e !important;
}

/* Dietary Tag Chips (Vibrant Pink Active State per Q7) */
.diet-pill {
  transition: all 0.18s ease;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid #062c1e;
  font-weight: 700;
}
.diet-pill.active {
  background-color: #ff33a8 !important;
  color: #ffffff !important;
  border-color: #062c1e !important;
  box-shadow: 3px 3px 0px #062c1e !important;
}
.diet-pill:not(.active) {
  background-color: #ffffff;
  color: #062c1e;
  border: 1.5px solid #062c1e;
}
.diet-pill:not(.active):hover {
  background-color: #f3f5df;
  transform: translateY(-1px);
}

/* Mood & Flavor Tag Chips */
.mood-pill {
  transition: all 0.18s ease;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid #062c1e;
  font-weight: 700;
}
.mood-pill.active {
  background-color: #ff5c00 !important;
  color: #ffffff !important;
  border-color: #062c1e !important;
  box-shadow: 3px 3px 0px #062c1e !important;
}
.mood-pill:not(.active) {
  background-color: #ffffff;
  color: #062c1e;
  border: 1.5px solid #062c1e;
}
.mood-pill:not(.active):hover {
  background-color: #f3f5df;
}

/* Recipe Filter Buttons */
.recipe-filter-btn {
  border: 1.5px solid #062c1e;
  transition: all 0.18s ease;
}
.recipe-filter-btn.active {
  background-color: #062c1e !important;
  color: #d1ff00 !important;
  box-shadow: 3px 3px 0px #ff33a8 !important;
}
.recipe-filter-btn:not(.active) {
  background-color: #ffffff;
  color: #062c1e;
}
.recipe-filter-btn:not(.active):hover {
  background-color: #f3f5df;
  transform: translateY(-1px);
}

/* Live Cooking Step Dots */
.step-dot-active {
  background-color: #ff33a8 !important;
  color: #ffffff !important;
  border: 2px solid #062c1e !important;
  box-shadow: 2px 2px 0px #062c1e !important;
  font-weight: 800;
}
.step-dot-completed {
  background-color: #d1ff00 !important;
  color: #062c1e !important;
  border: 1.5px solid #062c1e !important;
  font-weight: 800;
}
.step-dot-future {
  background-color: #f3f5df !important;
  color: #757a60 !important;
  border: 1px solid rgba(6, 44, 30, 0.2) !important;
}

/* Input Fields */
input[type="text"], input[type="password"], select {
  background-color: #ffffff;
  border: 1.5px solid #062c1e;
  color: #062c1e;
  transition: all 0.15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus {
  outline: none;
  border-color: #062c1e;
  box-shadow: 0 0 0 3px rgba(209, 255, 0, 0.65);
}

/* Subtle Magnifying Glass Search Animation */
@keyframes subtle-search {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.08) rotate(-7deg);
  }
  75% {
    transform: scale(1.08) rotate(7deg);
  }
}

.animate-subtle-search {
  animation: subtle-search 2.4s ease-in-out infinite;
  display: inline-block;
  transform-origin: center center;
}

/* Subtle Chef Hat Animation */
@keyframes subtle-chef {
  0%, 100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
  25% {
    transform: scale(1.06) translateY(-2px) rotate(-4deg);
  }
  75% {
    transform: scale(1.06) translateY(-2px) rotate(4deg);
  }
}

.animate-subtle-chef {
  animation: subtle-chef 2.4s ease-in-out infinite;
  display: inline-block;
  transform-origin: center center;
}

/* Slide-over Drawer Transitions */
.drawer-backdrop {
  transition: opacity 0.25s ease-out;
}
.drawer-backdrop.closed {
  opacity: 0;
  pointer-events: none;
}
.drawer-panel {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-panel.closed {
  transform: translateX(100%);
}

/* 9:16 Social Story Preview */
.aspect-story {
  aspect-ratio: 9 / 16;
}

/* Saved Recipes Preference Filter Chips & Dropdowns */
.saved-filter-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background-color: #f3f5df;
  color: #062c1e;
  border: 1.5px solid rgba(6, 44, 30, 0.25);
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.saved-filter-chip:hover {
  background-color: #ffffff;
  border-color: #062c1e;
}

.saved-filter-chip.active {
  background-color: #062c1e;
  color: #d1ff00;
  border-color: #062c1e;
  box-shadow: 2px 2px 0px #062c1e;
}

.saved-filter-dropdown {
  background-color: #ffffff;
  border: 2px solid #062c1e;
  border-radius: 1.125rem;
  box-shadow: 4px 4px 0px #062c1e;
  min-width: 14rem;
  padding: 0.4rem;
  animation: scale-up 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background-color: #d1ff00;
  color: #062c1e;
  border: 1.5px solid #062c1e;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 1px 1px 0px #062c1e;
}