/* Design System: The Epicurean Editorial
   Following the "Modern Maître D’" creative direction.
   Colours via Material Design 3 (Paper and Spice palette).
*/

:root {
  /* DARK THEME (Default) */
  /* hsl (fallback color) */
  --bg-dark: hsl(45 5% 10%);
  --bg: hsl(45 5% 12%);
  --bg-light: hsl(45 5% 18%);
  --text: hsl(45 15% 98%);
  --text-muted: hsl(45 10% 85%);
  --highlight: hsl(34 100% 80%);
  --border: hsl(34 25% 30%);
  --border-muted: hsl(34 20% 25%);
  --primary: hsl(34 100% 80%);
  --primary-container: hsl(34 100% 40%);
  --on-primary-container: hsl(34 100% 95%);
  --on-primary: hsl(34 100% 17%);
  --secondary: hsl(212 30% 80%);
  --tertiary: hsl(50 100% 80%);
  --surface-container-low: hsl(45 5% 14%);
  --surface-container: hsl(45 5% 16%);
  --surface-container-high: hsl(45 5% 18%);
  --surface-container-highest: hsl(45 5% 20%);
  --on-surface-variant: hsl(34 20% 70%);
  --outline-variant: hsla(34, 25%, 30%, 0.15);

  --primary-fixed: hsl(17 100% 90%);
  --on-tertiary-fixed-variant: hsl(47 100% 17%);

  /* oklch */
  --bg-dark: oklch(0.15 0.01 45);
  --bg: oklch(0.18 0.01 45);
  --bg-light: oklch(0.28 0.01 45);
  --text: oklch(0.98 0.01 85);
  --text-muted: oklch(0.85 0.01 85);
  --highlight: oklch(0.8 0.1 34.6);
  --border: oklch(0.4 0.05 34.6);
  --border-muted: oklch(0.3 0.05 34.6);
  --primary: oklch(0.8 0.1 34.6);
  --primary-container: oklch(0.6 0.2 34.6);
  --on-primary-container: oklch(0.95 0.05 34.6);
  --on-primary: oklch(0.25 0.08 34.6);
  --secondary: oklch(0.8 0.05 252);
  --tertiary: oklch(0.85 0.1 80);
  --surface-container-low: oklch(0.2 0.01 45);
  --surface-container: oklch(0.24 0.01 45);
  --surface-container-high: oklch(0.28 0.01 45);
  --surface-container-highest: oklch(0.32 0.01 45);
  --on-surface-variant: oklch(0.7 0.05 34.6);
  --outline-variant: oklch(0.4 0.05 34.6 / 0.15);

  --primary-fixed: oklch(0.9 0.05 34.6);
  --on-tertiary-fixed-variant: oklch(0.32 0.08 85);

  --danger: oklch(0.5 0.2 25);
  --warning: oklch(0.8 0.15 85);
  --success: oklch(0.6 0.15 145);
  --info: oklch(0.6 0.1 245);
}

body.light {
  /* LIGHT THEME (Paper and Spice) */
  /* hsl (fallback color) */
  --bg-dark: hsl(45 15% 95%);
  --bg: hsl(45 15% 98%);
  --bg-light: hsl(0 0% 100%);
  --text: hsl(120 3% 11%);
  --text-muted: hsl(34 20% 30%);
  --highlight: hsl(24 100% 32%);
  --border: hsl(34 25% 78%);
  --border-muted: hsl(34 20% 85%);
  --primary: hsl(24 100% 32%);
  --primary-container: hsl(21 96% 56%);
  --on-primary-container: hsl(21 100% 17%);
  --on-primary: hsl(0 0% 100%);
  --secondary: hsl(211 19% 38%);
  --tertiary: hsl(47 100% 23%);
  --surface-container-low: hsl(45 10% 95%);
  --surface-container: hsl(45 10% 93%);
  --surface-container-high: hsl(45 10% 91%);
  --surface-container-highest: hsl(45 10% 89%);
  --on-surface-variant: hsl(21 21% 28%);
  --outline-variant: hsla(21, 25%, 78%, 0.15);

  --primary-fixed: hsl(17 100% 90%);
  --on-tertiary-fixed-variant: hsl(47 100% 17%);

  /* oklch */
  --bg-dark: oklch(0.96 0.01 85);
  --bg: oklch(0.98 0.006 85);
  --bg-light: oklch(1 0 0);
  --text: oklch(0.18 0.005 160);
  --text-muted: oklch(0.4 0.05 34.6);
  --highlight: oklch(0.44 0.16 34.6);
  --border: oklch(0.8 0.05 34.6);
  --border-muted: oklch(0.85 0.05 34.6);
  --primary: oklch(0.44 0.16 34.6);
  --primary-container: oklch(0.64 0.22 34.6);
  --on-primary-container: oklch(0.3 0.1 34.6);
  --on-primary: oklch(1 0 0);
  --secondary: oklch(0.46 0.05 252);
  --tertiary: oklch(0.45 0.15 85);
  --surface-container-low: oklch(0.96 0.008 85);
  --surface-container: oklch(0.94 0.008 85);
  --surface-container-high: oklch(0.92 0.008 85);
  --surface-container-highest: oklch(0.9 0.008 85);
  --on-surface-variant: oklch(0.38 0.05 34.6);
  --outline-variant: oklch(0.8 0.05 34.6 / 0.15);

  --primary-fixed: oklch(0.9 0.05 34.6);
  --on-tertiary-fixed-variant: oklch(0.32 0.08 85);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-epilogue {
  font-family: 'Epilogue', sans-serif;
}

/* Material Symbols Outlined settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

/* Custom Ingredient Checklist from Design System */
.ingredient-check:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: var(--surface-container-low);
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

/* Transition for theme switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Existing component styles refactored for the new design */

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* Asymmetrical gap as per design */
  padding: 2rem 1rem 3rem;
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
}

.recipe-card {
  background-color: var(--bg-light); /* surface-container-lowest */
  border-radius: 1rem; /* rounded-xl */
  overflow: hidden;
  transition: all 0.5s ease;
}

.recipe-card:hover {
  box-shadow: 0px 20px 40px rgba(26, 28, 26, 0.06);
}

.recipe-image {
  width: 100%;
  height: 24rem; /* h-96 */
  object-fit: cover;
  transition: transform 0.7s ease;
}

.recipe-card:hover .recipe-image {
  transform: scale(1.05);
}

.recipe-title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--text);
  margin: 0;
}

.tab-navigation {
  display: flex;
  gap: 0.25rem;
  background-color: var(--surface-container-low);
  padding: 0.25rem;
  border-radius: 0.5rem;
  width: fit-content;
  margin-bottom: 1.5rem;
}

.tab-button {
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: var(--text);
}

.tab-button.active {
  background-color: var(--bg-light); /* surface-container-lowest */
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Utility styles for specific components in design */
.chefs-note {
  background-color: var(--primary-fixed);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

body:not(.light) .chefs-note {
  background-color: var(--surface-container-highest);
}

/* Layout helpers */
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: hsla(45, 15%, 98%, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 4rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--outline-variant);
}

body:not(.light) .sticky-header {
  background-color: hsla(45, 5%, 12%, 0.7);
}