@media (prefers-color-scheme: dark) {
  :root {
    --primary: #578dca; /* Primary-P1 */
    --primary-p2: #4764df; /* New color variable */
    --secondary: #6e44c4; /* Secondary-S1 */
    --accent: #3c710a; /* Primary-P3 */
    --primary-fg: #c7c6c6;

    --secondary-s3: #8496af; /* New color variable */
    --tertiary-t2: #818a91; /* New color variable */
    --tertiary-t4: #1e202b;

    --body-fg: #c7c6c6;
    --body-bg: #1c1c1c;
    --body-quiet-color: var(--secondary-s3);
    --body-medium-color: #444;
    --body-loud-color: #ffffff;

    --content-bg: #222222;
    --hover-bg: #25262b;

    --header-color: #313234;
    --header-branding-color: var(--accent);
    --header-bg: var(--body-bg);
    --header-link-color: var(--body-fg);

    --breadcrumbs-fg: var(--tertiary-t2);
    --breadcrumbs-link-fg: var(--tertiary-t2);
    --breadcrumbs-bg: var(--content-bg);
    --breadcrumbs-non-link: var(--secondary); /* New color variable */

    --link-fg: var(--primary-fg);
    --link-hover-color: var(--primary-p2);
    --link-selected-fg: var(--body-fg);

    --table-row-hover: var(--hover-bg);
    --table-header-bg: #000000;

    --hairline-color: #3e3e3e;
    --border-color: #363636;

    --error-fg: #ba2121;

    --text-red: #ba2121;
    --text-green: var(--accent);

    --message-success-bg: #003b00;
    --message-warning-bg: #444400;
    --message-error-bg: #350000;

    --darkened-bg: #111111;
    --selected-bg: var(--tertiary-t4);
    --selected-row: #3c710a;

    --button-fg: #fff;
    --button-bg: var(--primary-p2);
    --button-hover-bg: var(--primary);
    --default-button-bg: var(--primary);
    --default-button-hover-bg: var(--primary-p2);
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;
    --button-hover: #1836bf;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --scrollbar-hover-bg: #616161;
    --scrollbar-thumb-color: #4b4b4b;
    --scrollbar-track-color: #292929;

    --input-focus-border: var(--secondary-s3);
    --input-bg: var(--tertiary-t4);
    --input-color: var(--body-fg);
    --input-required-label: var(--primary-fg);

    color-scheme: dark;
  }
}

html[data-theme='dark'] {
  --primary: #578dca; /* Primary-P1 */
  --primary-p2: #4764df; /* New color variable */
  --secondary: #6e44c4; /* Secondary-S1 */
  --accent: #3c710a; /* Primary-P3 */
  --primary-fg: #eaeaea;

  --secondary-s3: #8496af; /* New color variable */
  --tertiary-t2: #818a91; /* New color variable */
  --tertiary-t4: #1e202b;

  --body-fg: #c6c6c6;
  --body-bg: #171717;
  --body-quiet-color: var(--secondary-s3);
  --body-medium-color: #444;
  --body-loud-color: #ffffff;

  --content-bg: #222222;
  --hover-bg: #25262b;

  --header-color: #313234;
  --header-branding-color: var(--accent);
  --header-bg: var(--body-bg);
  --header-link-color: var(--body-fg);

  --breadcrumbs-fg: var(--tertiary-t2);
  --breadcrumbs-link-fg: var(--tertiary-t2);
  --breadcrumbs-bg: var(--content-bg);
  --breadcrumbs-non-link: var(--secondary); /* New color variable */

  --link-fg: var(--primary-fg);
  --link-hover-color: var(--primary-p2);
  --link-selected-fg: var(--body-fg);

  --table-row-hover: var(--hover-bg);
  --table-header-bg: #0e0e0e;

  --hairline-color: #3e3e3e;
  --border-color: #363636;

  --error-fg: #ba2121;

  --text-red: #ba2121;
  --text-green: var(--accent);

  --message-success-bg: #003b00;
  --message-warning-bg: #444400;
  --message-error-bg: #350000;

  --darkened-bg: #111111;
  --selected-bg: var(--tertiary-t4);
  --selected-row: #2a4f08;

  --button-fg: #fff;
  --button-bg: var(--primary-p2);
  --button-hover-bg: var(--primary);
  --default-button-bg: var(--primary);
  --default-button-hover-bg: var(--primary-p2);
  --close-button-bg: #747474;
  --close-button-hover-bg: #333;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;
  --button-hover: #1836bf;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

  --scrollbar-hover-bg: #616161;
  --scrollbar-thumb-color: #4b4b4b;
  --scrollbar-track-color: #292929;

  --input-focus-border: var(--secondary-s3);
  --input-bg: var(--tertiary-t4);
  --input-color: var(--body-fg);
  --input-required-label: var(--primary-fg);

  color-scheme: dark;
}

/* THEME SWITCH */
.theme-toggle {
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  vertical-align: middle;
  margin-inline-start: 5px;
  margin-top: -1px;
}

.theme-toggle svg {
  vertical-align: middle;
  height: 1rem;
  width: 1rem;
  display: none;
}

/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
  display: none;
}

html[data-theme='auto'] .theme-toggle .theme-label-when-auto {
  display: block;
}

html[data-theme='dark'] .theme-toggle .theme-label-when-dark {
  display: block;
}

html[data-theme='light'] .theme-toggle .theme-label-when-light {
  display: block;
}

/* ICONS */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  fill: var(--header-link-color);
  color: var(--header-bg);
}

html[data-theme='auto'] .theme-toggle svg.theme-icon-when-auto {
  display: block;
}

html[data-theme='dark'] .theme-toggle svg.theme-icon-when-dark {
  display: block;
}

html[data-theme='light'] .theme-toggle svg.theme-icon-when-light {
  display: block;
}