:root {
  --base-rgb: 255, 255, 255;
  --text-rgb: 240, 240, 242;
  --bg-rgb: 8, 8, 10;
  --accent-rgb: 91, 106, 240;
  
  --bg: #08080a;
  --text: #f0f0f2;
  --accent: #5b6af0;
  
  --nav-bg: rgba(8, 8, 10, 0.72);
  --nav-overlay: rgba(8, 8, 10, 0.97);
}

[data-theme="light"] {
  --base-rgb: 0, 0, 0;
  --text-rgb: 17, 24, 39;
  --bg-rgb: 250, 250, 250;
  --accent-rgb: 75, 90, 240;
  
  --bg: #fafafa;
  --text: #111827;
  --accent: #4b5af0;
  
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-overlay: rgba(255, 255, 255, 0.98);
}

/* Base body transition */
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode specific elements like grid or SVG patterns */
[data-theme="light"] body::before {
  opacity: 0.04; /* Slightly more visible noise in light mode */
}

/* Theme knob animation */
[data-theme="light"] .theme-knob {
  transform: translateX(16px);
}

/* Sun/Moon Morph Animation */
.morph-sun-moon { transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); }
.morph-moon-cutout { transition: cx 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), cy 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); }
.morph-sun-core { transition: r 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); }
.morph-sun-rays { transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); transform-origin: center; }

[data-theme="light"] .morph-sun-moon { transform: rotate(90deg); }
[data-theme="light"] .morph-moon-cutout { cx: 25px; cy: 0px; }
[data-theme="light"] .morph-sun-core { r: 5px; }
[data-theme="light"] .morph-sun-rays { transform: scale(1); opacity: 1; }

html:not([data-theme="light"]) .morph-sun-moon { transform: rotate(40deg); }
html:not([data-theme="light"]) .morph-moon-cutout { cx: 17px; cy: 7px; }
html:not([data-theme="light"]) .morph-sun-core { r: 9px; }
html:not([data-theme="light"]) .morph-sun-rays { transform: scale(0); opacity: 0; }

[data-theme="light"] #hero-theme-knob { transform: translateX(24px); }