/* Design System Strategy: The Culinary Editorial */
:root {
  --primary: #1c6d25;
  --primary-container: #9df197;
  --on-primary: #eaffe2;
  --secondary: #954a25;
  --secondary-container: #ffdbcd;
  --on-secondary-container: #843d1a;
  --tertiary: #7f5700;
  --tertiary-container: #feb300;
  --on-tertiary-container: #523700;
  --surface: #fafaf5;
  --surface-container-low: #f3f4ee;
  --surface-container-high: #e7e9e2;
  --surface-container-highest: #e0e4dc;
  --surface-container-lowest: #ffffff;
  --outline-variant: rgba(176, 179, 172, 0.15);
  --on-surface: #30332e;
  --on-surface-variant: #5c605a;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--surface);
  color: var(--on-surface);
  line-height: 1.6;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Dark Mode Overrides */
.dark {
  --surface: #141b14;
  --surface-container-low: #1d251d;
  --surface-container-high: #242d24;
  --surface-container-highest: #2b352b;
  --surface-container-lowest: #0c120c;
  --on-surface: #e1e3e0;
  --on-surface-variant: #c1c9be;
  --outline-variant: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(20, 27, 20, 0.85);
}

.dark .glass-nav {
  background: var(--glass-bg);
}

.dark .card-lowest {
  background-color: var(--surface-container-low);
}

/* Mobile Drawer */
.drawer-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  background-color: var(--surface);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* Logo Interaction Refinement */
.logo-container:active #logo-bg-circle,
.logo-container:hover #logo-bg-circle {
  fill-opacity: 0.1;
}

/* Theme Toggle Animation */
#theme-toggle span {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark #theme-toggle span {
  transform: rotate(360deg);
}

h1, h2, h3, .font-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Glassmorphism */
.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.8);
}

/* Gradients */
.primary-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
}

/* Button Micro-interactions */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  border-radius: 9999px;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 20px -5px rgba(28, 109, 37, 0.3);
}

.btn-primary:active {
  transform: scale(0.95);
  box-shadow: 0 5px 10px -5px rgba(28, 109, 37, 0.5);
}

.btn-secondary {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-secondary:active {
  transform: scale(0.95);
}

/* No-Line Rule Utilities */
.card-lowest {
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 3rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lowest:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(48, 51, 46, 0.08);
}

/* Scroll Animations Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar Hide */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Logo Styling Refined */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none !important;
}
.logo-container:hover {
  transform: scale(1.04);
}
.logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1;
}
.logo-text b {
  font-weight: 900;
  color: var(--primary);
}
.logo-text i {
  color: var(--secondary);
  font-style: italic;
  font-weight: 900;
  padding: 0 1px;
}
.logo-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 4px 6px rgba(28, 109, 37, 0.15));
}

/* Footer Legibility & visibility */
footer {
  color: #ffffff;
}
footer a {
  color: #ffffff;
  opacity: 1; /* Maximum visibility */
  transition: all 0.2s ease;
}
footer a:hover {
  color: var(--primary-container);
}
footer h4 {
  color: var(--primary-container) !important; /* Brighter brand green for headers */
  font-weight: 800 !important;
}
footer p {
  opacity: 0.9; /* Near full visibility for paragraphs */
  color: #ffffff;
}