/* Base variables for light mode */
:root {
  --sat1: 95%;
  --sat2: 10%;
  --hue1: 206;
  --hue2: 6;
  --light1: 75%;
  --light2: 85%;
  --light3: 90%;
  --dark1: 40%;
  --dark2: 25%;
  --dark3: 10%;

  --light: hsl(206, 10%, 75%);
  --deep-blue: hsl(206, 71%, 25%);
  --light-blue: hsl(199, 40%, 84%);
  --lighter-blue: hsl(199, 40%, 91%);
  --lighter-bluer: hsl(206, 95%, 90%);
  --dark-brown: hsl(6, 95%, 25%);
  --light-green: hsl(100, 27%, 66%);
  --cyan: hsl(197, 100%, 47%);
  --cyan2: hsl(197, 50%, 47%);
  --dark: hsl(206, 95%, 10%);

  /* Links and selected menu */
  --primary-color: hsl(206, 0%, 10%);

  /* Contents background color */
  --page-background-color: var(--lighter-bluer);

  /* Font color */
  --page-foreground-color: var(--dark);

  /* Sidebar background */
  --side-nav-background: var(--deep-blue);
  --side-nav-foreground: white;
  --side-nav-selected: var(--light-green);

  /* Separator color */
  --separator-color: var(--side-nav-background);

  /* Markdown block quote background */
  --fragment-background: rgba(255, 255, 255, 0.2);
  --fragment-foreground: #202020;
  --fragment-lineheight: 14px;
  --fragment-keyword: #1817a2;
  --fragment-keywordtype: #5e0f7e;
  --fragment-token: #9f4511;
  --fragment-linenumber-color: #000;
  --fragment-linenumber-background: #ddd;

  /* Todo list headers and inline code */
  --code-background: var(--light);

  /* Logo and title sizes */
  --title-font-size: 30px;
  --top-height: 160px;

  --navigation-font-size: 16px;
  --toc-foreground: var(--side-nav-background);
  --toc-background: var(--light-blue);
}

/* Dark mode using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #7661b3;
    --page-background-color: hsl(var(--hue1), var(--sat1), var(--dark3));
    --page-foreground-color: hsl(var(--hue1), var(--sat1), var(--light3));
    --side-nav-background: hsl(var(--hue1), var(--sat1), var(--dark2));
    --side-nav-foreground: #f0f0f0; /* Sidebar text color fix */
    --toc-background: hsl(var(--hue1), var(--sat1), var(--dark1));
  }
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  body {
    color: var(--page-foreground-color);
    background-color: var(--page-background-color);
  }

  /* Sidebar text color fix for mobile dark mode */
  #side-nav, #nav-tree, #nav-tree a {
    color: var(--side-nav-foreground) !important;
  }
}

/* Typography tweaks */
p {
  margin-top: 0px;
}
h1 {
  margin-bottom: 10px;
}
h2 {
  margin-bottom: 5px;
}
h3, h4, h5, h6 {
  margin-bottom: 0;
}

/* Navigation and TOC */
#nav-tree-contents .annotated\.html {
  display: none;
}
#doc-content > div.PageDoc > div.contents > div.toc > ul > li > a {
  color: var(--toc-foreground) !important;
}
#doc-content > div.PageDoc > div.contents > div.toc > h3 {
  color: var(--toc-foreground) !important;
}
#doc-content > div.contents > table > tbody > tr > th {
  background-color: var(--deep-blue);
}
div.toc li::before {
  opacity: 1;
}
div .toc {
  background-color: var(--toc-background);
}
#nav-tree .selected a {
  color: var(--side-nav-selected) !important;
}

/* Doxygen todo table "Page" color */
dl.reflist dt {
  color: var(--primary-color);
}

/* Header and logo */
#titlearea {
  background-color: var(--deep-blue);
}
#projectlogo {
  padding: 20px;
  text-align: left;
  width: 100%;
}
#projectlogo .img {
  height: 200px;
}
#projectalign {
  text-align: center;
  display: none;
  width: 0px;
}
#logoandlinkcontainer {
  position: relative;
}
#homeimgcontainer {
  width: 100%;
  height: 100%;
  background-color: var(--deep-blue);
  position: absolute;
  bottom: 0px;
  opacity: 0;
}
#homeimgcontainer:hover {
  background-color: var(--deep-blue);
  cursor: pointer;
  opacity: 1;
}
#homeimg {
  display: block;
  margin-left: 70px;
  filter: invert(100%);
}