:root {
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-425: #969696;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #262626;
  --zinc-900: #18181b;
  --zinc-925: #1e1e1e;
  --zinc-950: #09090b;
}

[data-md-color-scheme="light"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #ffffff;
  --md-primary-bg-color: #000000;
  --md-primary-bg-color--light: #000000;

  --md-accent-fg-color: #000000;
  --md-accent-fg-color--light: #000000;
  --md-accent-fg-color--dark: #000000;

  --md-typeset-a-color: var(--md-accent-fg-color);

  .md-header--shadow {
    box-shadow: var(--zinc-100) 0 1px;
  }
}

[data-md-color-scheme="dark"] {
  --md-hue: 225deg;

  --md-primary-fg-color: var(--zinc-925);
  --md-primary-fg-color--light: var(--zinc-925);
  --md-primary-fg-color--dark: var(--zinc-925);
  --md-primary-bg-color: var(--zinc-425);
  --md-primary-bg-color--light: var(--zinc-425);

  --md-accent-fg-color: #ffffff;
  --md-accent-fg-color--light: #ffffff;
  --md-accent-fg-color--dark: #ffffff;
  --md-typeset-a-color: #ffffff;

  color-scheme: dark;

  --md-default-fg-color: var(--zinc-425);
  --md-default-fg-color--light: var(--zinc-500);
  --md-default-fg-color--lighter: var(--zinc-300);
  --md-default-fg-color--lightest: var(--zinc-200);
  --md-default-bg-color: var(--zinc-925);
  --md-default-bg-color--light: var(--zinc-900);
  --md-default-bg-color--lighter: var(--zinc-800);
  --md-default-bg-color--lightest: var(--zinc-700);

  --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82);
  --md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1);

  --md-code-hl-color: hsla(#{hex2hsl($clr-blue-a400)}, 1);
  --md-code-hl-color--light: hsla(#{hex2hsl($clr-blue-a400)}, 0.1);

  --md-code-hl-number-color: hsla(6, 74%, 63%, 1);
  --md-code-hl-special-color: hsla(340, 83%, 66%, 1);
  --md-code-hl-function-color: hsla(291, 57%, 65%, 1);
  --md-code-hl-constant-color: hsla(250, 62%, 70%, 1);
  --md-code-hl-keyword-color: hsla(219, 66%, 64%, 1);
  --md-code-hl-string-color: hsla(150, 58%, 44%, 1);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);

  --md-typeset-color: var(--md-default-fg-color);

  --md-typeset-a-color: var(--md-accent-fg-color);

  --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 90%, 0.12);
  --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 90%, 0.2);
  --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);

  --md-typeset-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3);

  --md-typeset-table-color: hsla(var(--md-hue), 15%, 95%, 0.12);
  --md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035);

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-footer-bg-color: hsla(var(--md-hue), 15%, 10%, 0.87);
  --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 8%, 1);

  --md-shadow-z1: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
  0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);

  --md-shadow-z2: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25),
  0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);

  --md-shadow-z3: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4),
  0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);

  img[src$="#only-light"],
  img[src$="#gh-light-mode-only"] {
    display: none;
  }

  .md-header--shadow {
    box-shadow: var(--zinc-800) 0 1px;
  }
}

.md-icon svg {
  fill: none;
}