@charset "UTF-8";

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
a {
  color: var(--accent-color);
}
#theme-toggle {
  width: 40px;
  height: 40px;
  background-color: var(--bg-color);
  border: 1px solid var(--accent-color);
  border-radius: 50% !important;
  color: var(--accent-color);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  margin-left: 15px;
  line-height: 1; 
  padding: 0;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
@media (hover: hover) and (pointer: fine) {
  #theme-toggle:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
  }
}

@media (max-width: 768px) {
  #theme-toggle {
    display: none;
  }
	
  .theme-selector {
    display: none;
  }
}

@media (max-width: 768px) {
  .switch {
    display: none !important;
  }
}

[data-theme="light"] {
  --bg-color: #fff;
  --bg-toggle: #ffffff;
  --accent-toggle: #5c5c5c;
  --text-color: #111;
  --accent-color: #ededed;
  --splash-intro-bg: #f9f9f9;
  --splash-intro-text: #111;
  --nav-link-color: #111;
  --nav-link-hover: #111;
  --available-border: #ddd;
  --available-circle: #50C878;
  --available-text: #111;
  --project-tag-color: #111;
  --project-tag-color-bar: #FFFFFF;
  --project-img-border: #f5f5f5;
  --about-paragraph: #222222;
  --resume-copy: #111111;
  --resume-title: #B7B7B7;
  --resume-pill: #111111;
  --resume-pill-border: #111111;
  --about-pill: #111111;
  --about-pill-hover: #FFFFFF;
  --about-pill-border: #111111;
  --about-pill-fill: #111111;
  --proj-container: #111;
  --proj-headline: #111;
  --read-time: #111;
  --tag-color: #fff;
  --proj-paragraph: #111;
  --toggle-expand: #444;
  --gray-card-bg: #fafafa;
  --gray-card-hover-tint: #f7f7f7;
  --gray-card-head: #111;
  --gray-card-subhead: #111;
  --section-tag: #111111;
  --static-link: #111;
  --cursor-color: #111111;
  --cursor-bg-blk: #FFFFFF;
  --cursor-bg-wht: #111111;
  --cursor-color-alt-blk: #FFFFFF;
  --cursor-color-alt-wht: #111111;
  --slider-border: #dcdcdc;
  --slider-btm: #fff;
  --slider-button: #111;
  --slider-text: #111;
  --gradient-bg: linear-gradient(135deg, #111, #111);
  --gradient-bg-flip: linear-gradient(135deg, #111, #111);
  --gradient-bg-b: transparent;
  --about-content-h2: #111;
  --about-content-p: #111;
  --timeline-content: #f5f5f5;
  --timeline-content-h3: #111;
  --timeline-date: #fff;
  --timeline-date-bg: #111;
  --timeline-content-arrow: #f5f5f5;
  --timeline-content-boxshadow: rgba(0, 0, 0, 0);
  --timeline-line: #111;
  --timeline-dot-bg: #fff;
  --timeline-dot-border: #111;
  --timeline-dot-boxshadow: rgba(66, 72, 83, 0.2);
  --timeline-content-p: #111;
  --gray-card-bg-b: #f5f5f5;
  --gray-card-hover-tint-b: #f5f5f5;
  --gray-card-bg-c: #f5f5f5;
  --gray-card-head-c: #111;
  --gray-card-subhead-c: #111;
  --toggle-hr: #444;
}
[data-theme="dark"] {
  --bg-color: #111;
  --bg-toggle: #2c2c2e;
  --accent-toggle: #2c2c2e;
  --text-color: #FFFFFF;
  --accent-color: #333;
  --splash-intro-bg: transparent;
  --splash-intro-text: #FFFFFF;
  --nav-link-color: #FFFFFF;
  --nav-link-hover: #FFFFFF;
  --available-border: #333333;
  --available-circle: #50C878;
  --available-text: #FFFFFF;
  --project-tag-color: #FFFFFF;
  --project-tag-color-bar: #FFFFFF;
  --project-img-border: #f5f5f5;
  --about-paragraph: #ADADAD;
  --resume-copy: #FFFFFF;
  --resume-title: #8a3eff;
  --resume-pill: #ADADAD;
  --resume-pill-border: #5c5c5c;
  --about-pill: #FFFFFF;
  --about-pill-hover: #111111;
  --about-pill-border: #FFFFFF;
  --about-pill-fill: #FFFFFF;
  --proj-container: #FFFFFF;
  --proj-headline: #FFFFFF;
  --read-time: #c8c8c8;
  --tag-color: #fff;
  --proj-paragraph: #c3c3c3;
  --toggle-expand: #FFFFFF;
  --gray-card-bg: #1b1b1b;
  --gray-card-hover-tint: #1e1e1e;
  --gray-card-head: #FFF;
  --gray-card-subhead: #c3c3c3;
  --section-tag: #8a3eff;
  --static-link: #FFFFFF;
  --cursor-color: #FFFFFF;
  --cursor-bg-blk: #111111;
  --cursor-bg-wht: #FFFFFF;
  --cursor-color-alt-blk: #111111;
  --cursor-color-alt-wht: #FFFFFF;
  --slider-border: #111;
  --slider-btm: #FFFFFF;
  --slider-text: #111111;
  --slider-button: #111111;
  --gradient-bg: linear-gradient(135deg, #6a11cb, #2575fc);
  --gradient-bg-flip: linear-gradient(135deg, #3a7bd5, #8a3eff);
  --gradient-bg-b: transparent;
  --about-content-h2: #ffffff;
  --about-content-p: #c8c8c8;
  --timeline-content: #1b1b1b;
  --timeline-content-h3: #eeeeee;
  --timeline-content-arrow: #1b1b1b;
  --timeline-date: #fff;
  --timeline-date-bg: linear-gradient(135deg, #6a11cb, #2575fc);
  --timeline-content-boxshadow: rgba(0, 0, 0, 0.1);
  --timeline-line: #8a3eff;
  --timeline-dot-bg: #111111;
  --timeline-dot-border: #8a3eff;
  --timeline-dot-boxshadow: rgba(138, 62, 255, 0.2);
  --timeline-content-p: #bbbbbb;
  --gray-card-bg-b: #1b1b1b;
  --gray-card-hover-tint-b: #1e1e1e;
  --gray-card-bg-c: #1b1b1b;
  --gray-card-head-c: #fff;
  --gray-card-subhead-c: #fff;
  --toggle-hr: #e5e5e5;
}
/* --- Toggle Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
  margin-left: 14px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-toggle);
  border: 0px solid var(--slider-border);
  border-radius: 24px !important;
  /* Disable transition initially */
  transition: none;
}

/* Re-enable transition only when ready */
.anim-ready .slider {
  transition: background-color 0.4s;
}

/* Your existing .slider:before stays as previously updated */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50% !important;
  transition: none;
}

.anim-ready .slider:before {
  transition: 0.4s;
}


input:checked + .slider {
  background-color: #d3d3d3;
}
input:checked + .slider:before {
  transform: translateX(21px);
}


.switch.no-anim .slider::before {
  transition: none !important;
}
.switch.no-anim .slider {
  transition: none !important;
}

.switch, .slider, .slider::before {
  will-change: background-color, transform;
}