/* Globals */

:root {
  --sidebar-target-width: 300px;
  --sidebar-width: min(var(--sidebar-target-width), 80vw);
  --sidebar-resize-indicator-width: 8px;
  --sidebar-resize-indicator-space: 2px;
  --page-padding: 15px;
  --content-max-width: 80%;
  --menu-bar-height: 50px;
  --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
  --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
  --searchbar-margin-block-start: 5px;

  --nh-yellow: #ffcc75;
  --nh-dark-red: #982135;
  --nh-light-red: #ff003a;
  --nh-orange: #ff5e0e;
  --nh-black: #2d334f;
  --nh-green: #13fe00;
  --nh-blue: #1338fe;
  --nh-dark-grey: #3a3a3a;
  --nh-grey: #666666;
  --nh-light-grey: #c8c9db;
  --nh-white: #fff;
}

/* Themes */
.dark {
  --bg: var(--nh-dark-grey);
  --fg: var(--nh-white);

  --sidebar-bg: var(--nh-dark-red);
  --sidebar-fg: var(--nh-white);
  --sidebar-non-existant: var(--nh-white);
  --sidebar-active: var(--nh-orange);
  --sidebar-spacer: var(--nh-dark-grey);

  --scrollbar: var(--sidebar-fg);

  --icons: var(--nh-white);
  --icons-hover: var(--nh-light-red);

  --links: var(--nh-orange);

  --theme-popup-bg: var(--nh-dark-grey);
  --theme-popup-border: var(--nh-light-grey);
  --theme-hover: var(--nh-orange);

  --quote-bg: var(--nh-dark-red);
  --quote-border: var(--nh-light-red);

  --warning-border: #ff8e00;

  --table-border-color: var(--nh-light-grey);
  --table-header-bg: var(--nh-grey);
  --table-alternate-bg: var(--nh-bg);

  --searchbar-border-color: var(--nh-light-grey);
  --searchbar-bg: var(--nh-dark-grey);
  --searchbar-fg: var(--nh-white);
  --searchbar-shadow-color: var(--nh-orange);
  --searchresults-border-color: var(--nh-light-grey);
  --searchresults-li-bg: magenta;
  --search-mark-bg: var(--nh-light-red);

  --inline-code-color: var(--nh-white);

	--code-bg: var(--nh-grey);
	--code-fg: var(--nh-white);
	--code-comment: var(--nh-light-grey);
	--code-red: var(--nh-light-red);
	--code-green: var(--nh);
	--code-blue: var(--nh-blue);
	--code-purple: var();
	--code-orange: var(--nh-light-orange);

	--color-scheme: dark;
    /* Same as `--icons` */
    --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%);

    --footnote-highlight: #2668a6;

    --overlay-bg: rgba(33, 40, 48, 0.4);

    --blockquote-note-color: #74b9ff;
    --blockquote-tip-color: #09ca09;
    --blockquote-important-color: #d3abff;
    --blockquote-warning-color: #f0b72f;
    --blockquote-caution-color: #f21424;

    --sidebar-header-border-color: #c18639;
}

.light {
  --bg: var(--nh-white);
  --fg: var(--nh-black);

  --sidebar-bg: var(--nh-dark-grey);
  --sidebar-fg: var(--nh-light-grey);
  --sidebar-non-existant: var(--nh-light-grey);
  --sidebar-active: var(--nh-orange);
  --sidebar-spacer: var(--nh-light-grey);

  --scrollbar: var(--sidebar-bg);

  --icons: var(--nh-dark-grey);
  --icons-hover: var(--nh-orange);

  --links: var(--nh-dark-red);

  --theme-popup-bg: var(--nh-white);
  --theme-popup-border: var(--nh-dark-grey);
  --theme-hover: var(--nh-orange);

  --quote-bg: var(--nh-light-red);
  --quote-border: var(--nh-dark-red);

  --warning-border: #ff8e00;

  --table-border-color: var(--nh-dark-grey);
  --table-header-bg: var(--nh-light-grey);
  --table-header-fg: var(--nh-white);
  --table-alternate-bg: var(--nh-white);

  --searchbar-border-color: var(--nh-light-grey);
  --searchbar-bg: var(--nh-dark-grey);
  --searchbar-fg: var(--nh-white);
  --searchbar-shadow-color: var(--nh-orange);
  --searchresults-border-color: var(--nh-light-grey);
  --searchresults-li-bg: magenta;
  --search-mark-bg: var(--nh-light-red);

  --inline-code-color: var(--nh-white);

	--code-bg: var(--nh-dark-grey);
	--code-fg: var(--nh-white);
	--code-comment: var(--nh-light-grey);
	--code-red: var(--nh-light-red);
	--code-green: var(--nh);
	--code-blue: var(--nh-blue);
	--code-purple: var();
	--code-orange: var(--nh-light-orange);

  --color-scheme: light;
}