/** =========================== **/
/** VARIABLES / THEME SETTINGS  **/
/** =========================== **/
:root {
  --primary: #10b981;
  --primary-dark: #059669;
  --secondary: #0369a1;
  --accent: #f59e0b;
  --bg: rgba(255, 255, 255, 0.65);
  --text: #1e293b;
  --card: rgba(243, 243, 243, 0.65);
  --header-bg: rgb(255, 255, 255);
  --border: #e2e8f0;
  --htext: color-mix(in srgb, var(--primary) 55%, var(--text) 55%);
  --bar-bg: #111111;
  --bar-text: #b6b6b6;
  --hero-filter: brightness(0) saturate(100%) invert(1);
  --primix: color-mix(in srgb, var(--primary) 75%, var(--text) 75%);
}

html:is(.dark-mode, :has(#themeSwitch:checked)) {
  color-scheme: dark;
  --bg: #212230;
  --text: #e2e8f0;
  --card: #273549;
  --border: #334155;
  --bar-text: rgba(226, 232, 240, 0.8);
  --hero-filter: brightness(0) saturate(100%) invert(14%) sepia(24%)
    saturate(410%) hue-rotate(196deg) brightness(105%) contrast(105%);
  --htext: color-mix(in srgb, var(--primary) 55%, var(--text) 55%);
}

/** ============ **/
/**  ANIMATIONS  **/
/** ============ **/

@keyframes hero-kenburns {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes hero-bg-zoom {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 110% 110%;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}