:root {
  font-family: var(--font-mono);
  --page-font-family: var(--font-humanist); /*HAS NO IMPACT?*/
  --page-radius: var(--border-radius-2);
  --neo-navgroup-gap: 0;
  --neo-popover-padding: var(--size-1);
  --sb-notch: 0;
  overflow-wrap: anywhere;
}

:root{
  color-scheme:light;
  --accent: oklch(.205 0 0);
  --accent-hover: oklch(.205 0 0 / .9);
  --accent-fg: oklch(.985 0 0);
  --page-fg: var(--neutral-1-on);
  --page-bg: var(--neutral-1);
  --muted: oklch(.556 0 0);
  --link: var(--neutral-1-on);
  --link-hover: var(--neutral-3-on);
  --link-visited: var(--neutral-1-on);
  --btn-bg: var(--neutral-variant-1);
  --btn-fg: var(--neutral-variant-1-on);
  --btn-border: var(--neutral-variant-1-dim);
  --btn-hover-bg: var(--neutral-variant-3);
  --danger-bg: var(--error-9);
  --danger-fg: var(--error-9-on);
  --danger-hover-bg: var(--error-8);
  --neo-button-bg: var(--neutral-variant-3);
  --neo-button-color: var(--neutral-variant-3-on);
  --neo-button-border-color: var(--neutral-variant-3-dim);
  --neo-button-hover-bg: var(--neutral-3);
  --neo-button-primary-bg: var(--primary-9);
  --neo-button-primary-color: var(--primary-9-on);
  --neo-button-primary-hover-bg: var(--primary-8);
  --neo-button-active-bg: var(--neutral-3);
  --neo-button-active-color: var(--neutral-3-on);
  --neo-button-ghost-hover-bg: var(--neutral-3);
  --neo-button-ghost-active-bg: var(--neutral-4);
  --neo-select-option-selected-bg: var(--primary-9);
  --neo-select-option-selected-color: var(--primary-9-on);
  --neo-select-option-hover-bg: var(--btn-hover-bg);
  --neo-popover-bg: var(--btn-bg);
  --neo-popover-color: var(--btn-fg);

  --citation-bg: var(--secondary-4);
}

:root.dark{
  color-scheme:dark;
  --accent: var(--primary-4);
  --accent-hover: var(--primary-5);
  --accent-fg: var(--primary-4-on);
  --page-fg: var(--neutral-12-on);
  --page-bg: var(--neutral-12);
  --muted: var(--neutral-12-dim);
  --link: var(--neutral-12-on);
  --link-hover: var(--neutral-10-on);
  --link-visited: var(--neutral-12-on);
  --btn-bg: var(--neutral-variant-10);
  --btn-fg: var(--neutral-variant-10-on);
  --btn-border: var(--neutral-variant-10-dim);
  --btn-hover-bg: var(--neutral-variant-8);
  --danger-bg: var(--error-4);
  --danger-fg: var(--error-4-on);
  --danger-hover-bg: var(--error-5);
  --neo-button-bg: var(--neutral-variant-10);
  --neo-button-color: var(--neutral-variant-10-on);
  --neo-button-border-color: var(--neutral-variant-10-dim);
  --neo-button-hover-bg: var(--neutral-10);
  --neo-button-primary-bg: var(--primary-4);
  --neo-button-primary-color: var(--primary-4-on);
  --neo-button-primary-hover-bg: var(--primary-5);
  --neo-button-active-bg: var(--neutral-10);
  --neo-button-active-color: var(--neutral-10-on);
  --neo-button-ghost-hover-bg: var(--neutral-9);
  --neo-button-ghost-active-bg: var(--neutral-8);
  --neo-button-danger-bg: var(--danger-bg);
  --neo-button-danger-color: var(--danger-fg);
  --neo-button-danger-hover-bg: var(--danger-hover-bg);
  --neo-select-option-selected-bg: var(--primary-4);
  --neo-select-option-selected-color: var(--primary-4-on);
  --neo-select-option-hover-bg: var(--btn-hover-bg);
  --neo-popover-bg: var(--btn-bg);
  --neo-popover-color: var(--btn-fg);

  --citation-bg: var(--secondary-8);
}

:root.system{
  @media (prefers-color-scheme: light) {
    color-scheme:light;
    --accent: oklch(.205 0 0);
    --accent-hover: oklch(.205 0 0 / .9);
    --accent-fg: oklch(.985 0 0);
    --page-fg: var(--neutral-1-on);
    --page-bg: var(--neutral-1);
    --muted: oklch(.556 0 0);
    --link: var(--neutral-1-on);
    --link-hover: var(--neutral-3-on);
    --link-visited: var(--neutral-1-on);
    --btn-bg: var(--neutral-variant-1);
    --btn-fg: var(--neutral-variant-1-on);
    --btn-border: var(--neutral-variant-1-dim);
    --btn-hover-bg: oklch(.97 0 0);
    --danger-bg: var(--error-9);
    --danger-fg: var(--error-9-on);
    --danger-hover-bg: var(--error-8);
    --neo-button-bg: var(--neutral-variant-3);
    --neo-button-color: var(--neutral-variant-3-on);
    --neo-button-border-color: var(--neutral-variant-3-dim);
    --neo-button-hover-bg: var(--neutral-3);
    --neo-button-primary-bg: var(--primary-9);
    --neo-button-primary-color: var(--primary-9-on);
    --neo-button-primary-hover-bg: var(--primary-8);
    --neo-button-active-bg: var(--neutral-3);
    --neo-button-active-color: var(--neutral-3-on);
    --neo-button-ghost-hover-bg: var(--neutral-3);
    --neo-button-ghost-active-bg: var(--neutral-4);
    --neo-select-option-selected-bg: var(--primary-9);
    --neo-select-option-selected-color: var(--primary-9-on);
    --neo-select-option-hover-bg: var(--btn-hover-bg);
    --neo-popover-bg: var(--btn-bg);
    --neo-popover-color: var(--btn-fg);

    --citation-bg: var(--secondary-4);
  }
  @media (prefers-color-scheme: dark) {
    color-scheme:dark;
    --accent: var(--primary-4);
    --accent-hover: var(--primary-5);
    --accent-fg: var(--primary-4-on);
    --page-fg: var(--neutral-12-on);
    --page-bg: var(--neutral-12);
    --muted: var(--neutral-12-dim);
    --link: var(--neutral-12-on);
    --link-hover: var(--neutral-10-on);
    --link-visited: var(--neutral-12-on);
    --btn-bg: var(--neutral-variant-10);
    --btn-fg: var(--neutral-variant-10-on);
    --btn-border: var(--neutral-variant-10-dim);
    --btn-hover-bg: oklch(.269 0 0);
    --danger-bg: var(--error-4);
    --danger-fg: var(--error-4-on);
    --danger-hover-bg: var(--error-5);
    --neo-button-bg: var(--neutral-variant-10);
    --neo-button-color: var(--neutral-variant-10-on);
    --neo-button-border-color: var(--neutral-variant-10-dim);
    --neo-button-hover-bg: var(--neutral-10);
    --neo-button-primary-bg: var(--primary-4);
    --neo-button-primary-color: var(--primary-4-on);
    --neo-button-primary-hover-bg: var(--primary-5);
    --neo-button-active-bg: var(--neutral-10);
    --neo-button-active-color: var(--neutral-10-on);
    --neo-button-ghost-hover-bg: var(--neutral-9);
    --neo-button-ghost-active-bg: var(--neutral-8);
    --neo-button-danger-bg: var(--danger-bg);
    --neo-button-danger-color: var(--danger-fg);
    --neo-button-danger-hover-bg: var(--danger-hover-bg);
    --neo-select-option-selected-bg: var(--primary-4);
    --neo-select-option-selected-color: var(--primary-4-on);
    --neo-select-option-hover-bg: var(--btn-hover-bg);
    --neo-popover-bg: var(--btn-bg);
    --neo-popover-color: var(--btn-fg);

    --citation-bg: var(--secondary-8);
  }
}

/* TODO:: Add light variant of this? */
@media(prefers-color-scheme:dark){
  :root:not(.light):not(.dark):not(.system){
    color-scheme:dark;
    --accent: var(--primary-4);
    --accent-hover: var(--primary-5);
    --accent-fg: var(--primary-4-on);
    --page-fg: var(--neutral-12-on);
    --page-bg: var(--neutral-12);
    --muted: var(--neutral-12-dim);
    --link: var(--neutral-12-on);
    --link-hover: var(--neutral-10-on);
    --link-visited: var(--neutral-12-on);
    --btn-bg: var(--neutral-10);
    --btn-fg: var(--neutral-10-on);
    --btn-border: var(--neutral-10-dim);
    --btn-hover-bg: oklch(.269 0 0);
    --danger-bg: oklch(.704 .191 22.216);
    --danger-fg: oklch(.985 0 0);
    --danger-hover-bg: oklch(.704 .191 22.216 / .9);
    --neo-button-bg: var(--neutral-11);
    --neo-button-color: var(--neutral-11-on);
    --neo-button-border-color: var(--neutral-11-dim);
    --neo-button-hover-bg: var(--neutral-10);
    --neo-button-primary-bg: var(--primary-4);
    --neo-button-primary-color: var(--primary-4-on);
    --neo-button-primary-hover-bg: var(--primary-5);
    --neo-button-active-bg: var(--neutral-10);
    --neo-button-active-color: var(--neutral-10-on);
    --neo-button-ghost-hover-bg: var(--neutral-9);
    --neo-button-ghost-active-bg: var(--neutral-8);
    --neo-select-option-selected-bg: var(--primary-4);
  }
}