:root {
  --color-accent: oklch(0.7686 0.1236 133.88);
  --max-width: 100ch;
  color-scheme: light dark;
}

/* Auto mode (respects OS preference) */
:root:not([color-scheme]) {
  --gradient1: oklch(100% 3% 200);
  --gradient2: oklch(98% 3% 220);

  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-bottom: oklch(80% 3% 200);
  --nav-shadow: oklch(0% 0% 0 / 0.2);

  --h2-text: oklch(50% 5% 200);
  --h2-bottom: oklch(80% 3% 200);

  --code: oklch(from var(--color-accent) 96% 3% h);
  --text-color: black;

  --link: oklch(from var(--color-accent) 65% c h);
  --link-hover: oklch(from var(--color-accent) 80% c h);

  --toc: oklch(from var(--color-accent) 96% 3% h);
  --tag: oklch(from var(--color-accent) 95% 5% h);
  --tag-text: oklch(from var(--color-accent) 55% c h);
  --tag-border: oklch(from var(--color-accent) 90% 5% h);
  --tag-hover: var(--color-accent);

  --card: white;
  --card-shadow: oklch(0% 0% 0 / 0.1);
  --card-border: oklch(85% 3% 200);
  --card-hover: oklch(0% 0% 0 / 0.3);

  --table-hover: oklch(from var(--color-accent) 99% 3% h);
  --column-text: oklch(30% 5% 200);

  --input: oklch(100% 0 360);
  --input-text: oklch(30% 3% 200);
  --input-border: oklch(85% 3% 200);
  --input-focused: oklch(from var(--color-accent) 80% c h);
  --input-placeholder: oklch(40% 3% 200);
  --input-options: rgba(255, 255, 255, 0.8);

  --scroll: oklch(80% 0 360 / 0.7);
  --scroll-hover: oklch(70% 0 360 / 0.7);
}

/* Dark mode when OS prefers dark and no manual override */
@media (prefers-color-scheme: dark) {
  :root:not([color-scheme]) {
    --gradient1: oklch(27% 3% 200);
    --gradient2: oklch(25% 3% 220);

    --nav-bg: rgba(50, 50, 50, 0.8);
    --nav-bottom: oklch(50% 3% 200);
    --nav-shadow: oklch(0% 0% 0 / 0.4);

    --h2-text: oklch(70% 5% 200);
    --h2-bottom: oklch(55% 3% 200);

    --code: oklch(from var(--color-accent) 35% 10% h);
    --text-color: oklch(85% 5% 200);

    --link: oklch(from var(--color-accent) 80% c h);
    --link-hover: oklch(from var(--color-accent) 95% c h);

    --toc: oklch(from var(--color-accent) 29% 3% h);
    --tag: oklch(from var(--color-accent) 30% 10% h);
    --tag-text: var(--color-accent);
    --tag-border: oklch(from var(--color-accent) 35% 10% h);
    --tag-hover: oklch(from var(--color-accent) 55% c h);

    --card: oklch(25% 3% 200);
    --card-shadow: oklch(0% 0% 0 / 0.2);
    --card-border: oklch(35% 3% 200);
    --card-hover: oklch(0% 0% 0 / 0.7);

    --table-hover: oklch(from var(--color-accent) 30% 10% h);
    --column-text: oklch(85% 5% 200);

    --input: oklch(35% 4% 200);
    --input-text: oklch(80% 3% 200);
    --input-border: none;
    --input-focused: oklch(from var(--color-accent) 45% c h);
    --input-placeholder: oklch(70% 3% 200);
    --input-options: oklch(35% 4% 200 / 0.8);

    --scroll: oklch(55% 4% 200 / 0.7);
    --scroll-hover: oklch(65% 4% 200 / 0.7);
  }
}

:root[color-scheme="light"] {
  --gradient1: oklch(100% 3% 200);
  --gradient2: oklch(98% 3% 220);

  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-bottom: oklch(80% 3% 200);
  --nav-shadow: oklch(0% 0% 0 / 0.2);

  --h2-text: oklch(50% 5% 200);
  --h2-bottom: oklch(80% 3% 200);

  --code: oklch(from var(--color-accent) 96% 3% h);
  --text-color: black;

  --link: oklch(from var(--color-accent) 65% c h);
  --link-hover: oklch(from var(--color-accent) 80% c h);

  --toc: oklch(from var(--color-accent) 96% 3% h);
  --tag: oklch(from var(--color-accent) 95% 5% h);
  --tag-text: oklch(from var(--color-accent) 55% c h);
  --tag-border: oklch(from var(--color-accent) 90% 5% h);
  --tag-hover: var(--color-accent);

  --card: white;
  --card-shadow: oklch(0% 0% 0 / 0.1);
  --card-border: oklch(85% 3% 200);
  --card-hover: oklch(0% 0% 0 / 0.3);

  --table-hover: oklch(from var(--color-accent) 99% 3% h);
  --column-text: oklch(30% 5% 200);

  --input: oklch(100% 0 360);
  --input-text: oklch(30% 3% 200);
  --input-border: oklch(85% 3% 200);
  --input-focused: oklch(from var(--color-accent) 80% c h);
  --input-placeholder: oklch(40% 3% 200);
  --input-options: rgba(255, 255, 255, 0.8);

  --scroll: oklch(80% 0 360 / 0.7);
  --scroll-hover: oklch(70% 0 360 / 0.7);
}

:root[color-scheme="dark"] {
  --gradient1: oklch(27% 3% 200);
  --gradient2: oklch(25% 3% 220);

  --nav-bg: rgba(50, 50, 50, 0.8);
  --nav-bottom: oklch(50% 3% 200);
  --nav-shadow: oklch(0% 0% 0 / 0.4);

  --h2-text: oklch(70% 5% 200);
  --h2-bottom: oklch(55% 3% 200);

  --code: oklch(from var(--color-accent) 35% 10% h);
  --text-color: oklch(85% 5% 200);

  --link: oklch(from var(--color-accent) 80% c h);
  --link-hover: oklch(from var(--color-accent) 95% c h);

  --toc: oklch(from var(--color-accent) 29% 3% h);
  --tag: oklch(from var(--color-accent) 30% 10% h);
  --tag-text: var(--color-accent);
  --tag-border: oklch(from var(--color-accent) 35% 10% h);
  --tag-hover: oklch(from var(--color-accent) 55% c h);

  --card: oklch(25% 3% 200);
  --card-shadow: oklch(0% 0% 0 / 0.2);
  --card-border: oklch(35% 3% 200);
  --card-hover: oklch(0% 0% 0 / 0.7);

  --table-hover: oklch(from var(--color-accent) 30% 10% h);
  --column-text: oklch(85% 5% 200);

  --input: oklch(35% 4% 200);
  --input-text: oklch(80% 3% 200);
  --input-border: none;
  --input-focused: oklch(from var(--color-accent) 45% c h);
  --input-placeholder: oklch(70% 3% 200);
  --input-options: oklch(35% 4% 200 / 0.8);

  --scroll: oklch(55% 4% 200 / 0.7);
  --scroll-hover: oklch(65% 4% 200 / 0.7);
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font: 100%/1.5 system-ui;
  margin-top: 0;
  background: linear-gradient(135deg, var(--gradient1) 0%, var(--gradient2) 100%);
  min-height: 100vh;
  background-color: canvas;
  color: canvastext;
  overflow-anchor: none;
}

.content {
  max-width: var(--max-width);
  margin-inline: max(1em, (100% - var(--max-width)) / 2);
  color: var(--text-color);
}

.nav-wrapper {
  position: sticky;
  top: 1em;
  z-index: 1000;
  margin-bottom: 2em;
}

.nav-wrapper nav {
  display: flex;
  max-width: 125ch;
  margin-inline: max(1em, (100% - 125ch) / 2);
  border-bottom: 1px solid var(--nav-bottom);
  background: var(--nav-bg);
  box-shadow: 0 2px 16px var(--nav-shadow);
  border-radius: 12px;
  overflow: hidden;
  margin: 1em auto 2em;
  backdrop-filter: blur(2px);
}


.nav-wrapper nav a {
  flex: 1;
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 0.9em;
  transition: all 0.2s ease;
}

.nav-wrapper nav a:hover {
  border-bottom: 0.4em solid var(--color-accent);
  padding-bottom: 0.1em;
  background-color: color-mix(in oklch, color-mix(in oklch, var(--color-accent, oklch(65% 50% 200)), canvas 85%) 70%, transparent);
}


.nav-wrapper nav a.current {
  border-bottom: 0.4em solid var(--nav-bottom);
  padding-bottom: 0.1em
}

/* Theme Toggle Styles - BOTTOM RIGHT */
.theme-switcher {
  position: fixed;
  bottom: 1em;
  /* Changed from top to bottom */
  right: 1em;
  /* Keep right */
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--nav-bg);
  padding: 0.5em 1em;
  border-radius: 50px;
  box-shadow: 0 2px 16px var(--nav-shadow);
  z-index: 1001;
  backdrop-filter: blur(2px);
}

.theme-label {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--text-color);
}

/* Switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, oklch(80% 3% 200), oklch(60% 3% 200));
  transition: .3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "☀️";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

input:checked+.slider {
  background: linear-gradient(135deg, oklch(50% 3% 200), oklch(30% 3% 200));
}

input:checked+.slider:before {
  content: "🌙";
  transform: translateX(26px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 350%;
  background: linear-gradient(135deg, var(--color-accent), oklch(65% 50% 200));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
}

h2 {
  font-size: 200%;
  color: var(--h2-text);
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 120%;
}

h5,
h6 {
  font-size: 110%;
}

.project-detail h2 {
  border-bottom: 2px solid var(--h2-bottom);
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
  font-size: 1.8em;
}

.project-header {
  text-align: center;
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 2px solid var(--h2-bottom);
}

.project-author {
  font-weight: 500;
  font-size: large;
}

.project-date,
.project-category {
  margin: 0.2em;
}

.project-section {
  margin: 3em 0;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

strong {
  color: var(--link);
}

code {
  background: var(--code);
  border-radius: 5px;
}

.toc {
  background: var(--toc);
  padding: 1.5em;
  border-radius: 8px;
  margin: 2em 0;
}

.toc h2 {
  margin-top: 0;
}

.toc ul {
  list-style: none;
  padding: 0;
}

.toc li {
  margin: 0.5em 0;
}

.toc a {
  color: var(--link);
  text-decoration: none;
}

.toc a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.tag {
  padding: 0.5em 1em;
  border-radius: 25px;
  background: var(--tag);
  border: 1px solid var(--tag-border);
  color: var(--tag-text);
}

.card {
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 12px var(--card-shadow);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--card-hover);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px var(--card-shadow);
  border: 1px solid var(--card-border)
}

th,
td {
  padding: 0.75em 1em;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}

th {
  background: var(--code);
  font-weight: 600;
  color: var(--column-text);
}

tr:hover {
  transition: all 0.2s ease;
  background: var(--table-hover);
}

/* MOBILE */
/* Hide hamburger menu by default (desktop) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5em;
  padding: 0.5em;
  cursor: pointer;
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    width: 100%;
    /* Ensures full width */
    border-bottom: 1px solid var(--nav-bottom);
    margin: 0;
    /* Remove margin gap */
  }

  .nav-wrapper nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 90%;
    /* make sure it stretches across */
    background: var(--nav-bg);
    box-shadow: 0 4px 12px var(--nav-shadow);
    border-radius: 12px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .nav-wrapper nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Make sure hamburger stays visible and clean */
  .menu-toggle {
    display: block;
    font-size: 1.8em;
    color: var(--color-accent);
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: 0.5em 0.8em;
  }

  .menu-toggle:focus,
  .menu-toggle:active {
    outline: none;
    background: transparent !important;
    /* Prevent green box */
  }

  body {
    margin: 0;
    overflow-x: hidden;
    /* avoid horizontal scrollbars */
    padding-bottom: 1.5em;
  }

  .theme-switcher {
    bottom: 0.5em;
    /* Changed from top to bottom */
    right: 0.5em;
    padding: 0.4em 0.8em;
  }

  .theme-label {
    font-size: 0.8em;
  }

  .switch {
    width: 44px;
    height: 22px;
  }

  .slider:before {
    height: 18px;
    width: 18px;
    font-size: 10px;
  }

  input:checked+.slider:before {
    transform: translateX(22px);
  }
}