/* LIGHT / DARK MODE aka COOK MODE!!!!!!!! */

/* ==================================
   1. VARIABLES (Theme Definitions) 
   ================================== */

:root {
  --bgMain: #e8f5e9;
  --bgSurface: #fff;
  --bgGlass: #143c3226; 
  
  --textMain: #222;
  --textMuted: #555;
  --textInverse: #fff;

  --accent: #4caf50;
  --accentStrong: #1f6f5b;
  --accentGlow: #3ff3c340; 

  --borderSoft: #ddd;
  --shadowSoft: 0 20px 40px #00000040;
}

/* Dark Mode Variable Overrides */
[data-theme="dark"] {
  --bgMain: #0e1513;
  --bgSurface: #121917;
  --bgGlass: #143c3259;

  --textMain: #e6f2ee;
  --textMuted: #9fbcb3;
  --textInverse: #fff;

  --accent: #3ff3c3;
  --accentStrong: #31bb96;

  --borderSoft: #2a3a35;
}

/* ==================================
   2. GLOBAL THEME MAPPING
   ================================== */

body {
  background: var(--bgMain);
  color: var(--textMain);
}

#grid,
#videoSection,
.aboutInfo,
.searchBox,
.resultsPreview,
.scalerInstructionsBox {
  background-color: var(--bgGlass);
}

.mealCard,
.modalContent,
#chatBox {
  background-color: var(--bgSurface);
  color: var(--textMain);
}

p,
li,
label {
  color: var(--textMain);
}

h1, h2, h3 {
  color: var(--accentStrong);
}

/* Borders */
.border,
.resultsPreview,
.mealCard {
  border-color: var(--borderSoft);
}

/* Buttons & Accents */
button,
.viewRecipeBtn,

.multBtn {
  background-color: var(--accent);
  color: var(--textInverse);
}

button:hover,
.unitButton:hover,
.multBtn:hover {
  filter: brightness(1.1);
}

/* ==================================
   3. THEME TOGGLE (Sticky/Floating)
   ================================== */

/* The Container positions the button on screen */
.themeContainer {
  position: fixed;
  top: 585px;
  left: 25px;
  z-index: 1000;
}

/* The Button removes default styling */
#themeToggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 72px; 
  outline: none;
}

/* The Track (Glass Pill) */
.toggle-track {
  display: block;
  position: relative;
  width: 100%;
  height: 34px; 
  background-color: #143c3259; 
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 10px 25px #00000059;
  transition: background 0.3s ease;
}

/* The Thumb (Sliding Circle) */
.toggle-thumb {
  position: absolute;
  top: 4px; 
  left: 4px;
  width: 24px; 
  height: 26px;
  background: linear-gradient(145deg, #3ff3c3, #1f6f5b);
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px #00000066;
  z-index: 2;
}

/* The Icons (Sun/Moon) */
.toggle-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em; 
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.toggle-icon.sun {
  left: 15px; 
  opacity: 1;
}

.toggle-icon.moon {
  right: 10px;
  opacity: 0.4;
}

/* Hover Polish */
#themeToggle:hover .toggle-track {
  background-color: #143c3273;
}

/* ==================================
   4. DARK MODE STATE REACTIONS
   ================================== */

/* Toggle Button Reactions */
[data-theme="dark"] .toggle-thumb {
  transform: translateX(38px); /* px for movement */
  background: linear-gradient(145deg, #31bb96, #3ff3c3);
}

[data-theme="dark"] .toggle-track {
  background-color: #1f6f5b4d;
}

[data-theme="dark"] .toggle-icon.sun {
  opacity: 0.3;
}

[data-theme="dark"] .toggle-icon.moon {
  opacity: 0.9;
}

/* UI Glow Effects (Logo, Social, Menus) */
[data-theme="dark"] .logoDiv {
  box-shadow: 0 0 30px var(--accentGlow);
}

[data-theme="dark"] .logoDiv img {
  filter: brightness(1.1) saturate(1.2);
}

[data-theme="dark"] .socialDiv {
  box-shadow: 0 0 30px #3ff3c333;
}

[data-theme="dark"] .socialDiv img {
  filter: brightness(1.2);
}

[data-theme="dark"] .socialHamburgerBox {
  box-shadow: 0 0 28px var(--accentGlow);
  position: fixed;
  top: 375px;
  left: 10px;
}

[data-theme="dark"] .socialHamburgerImgBox img {
  filter: brightness(1.15) saturate(1.1);
}

[data-theme="dark"] #hamburgerBox {
  box-shadow: 0 0 35px #3ff3c34d, 0 20px 40px #00000099;
}

[data-theme="dark"] #hamburgerBox img {
  filter: brightness(1.15) saturate(1.2);
}

[data-theme="dark"] #chatToggle {
  background-color: #1c5649;
  box-shadow: 0 0 25px #3ff3c359, 0 10px 25px #00000099;
}

[data-theme="dark"] #about {
  background-color: #1c5649;
  box-shadow: 0 20px 40px #aaa;
}

[data-theme="dark"] #modalInstructions {
  color: #fff;
  filter: brightness(1.1) saturate(1.2) drop-shadow(0 1px 2px var(--accentGlow));
  font-size: 1.5em;
}

[data-theme="dark"] #modalIngredients li {
  font-size: 1.3em;
}

[data-theme="dark"] h1 {
  text-shadow: 0px 1px 1px #fff;
  filter: brightness(1.5);
}

[data-theme="dark"] h2 {
  text-shadow: 0px 1px 1px #fff;
  filter: brightness(1.2);
}

[data-theme="dark"] h3 {
  text-shadow: 0px 1px 1px #fff;
  filter: brightness(1.2);
}

[data-theme="dark"] .aboutInfo h4 {
  color: #fff;
  text-shadow: 0 1px 1px #000;
}

[data-theme="dark"] #videoSection h1 {
  text-shadow: 0 2px 4px #fff;
  filter: brightness(1.5);
  font-size: 4em;
}

[data-theme="dark"] #videoSection {
  box-shadow: 0px 20px 40px #aaa;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .searchBox {
  box-shadow: 0px 5px 10px #fff;
  backdrop-filter: blur(8px);
  background-color: #aaa;
}

[data-theme="dark"] .searchBox h3 {
  color: #000;
}

[data-theme="dark"] .instructionsDiv {
  background-color: var(--bgGlass);
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] #unitConversionSection {
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .mintScaler {
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .scalerInstructionsBox {
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
  
}

[data-theme="dark"] .scalerWrapper {
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .scalerVideoContainer {
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .stepText {
  color: #bbb;
}

[data-theme="dark"] #modalTitle {
  color: #bbb;
}

[data-theme="dark"] #modalInstructions {
  background-color: var(--bgGlass);
  box-shadow: 0px 5px 10px #bbb;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .cta-button {
  color: #fff;
  font-size: 1.5em;
}

[data-theme="dark"] .cookbookIconDiv {
  background-color: #00000060; /* Darker glass */
  border-color: #ffffff1a;
}