@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css");

[data-md-color-scheme="latte"] {
  --md-hue: 220;
  --md-default-fg-color: var(--ctp-latte-text);
  --md-default-fg-color--light: color-mix(
    in srgb,
    var(--ctp-latte-text) 62%,
    transparent
  );
  --md-default-fg-color--lighter: color-mix(
    in srgb,
    var(--ctp-latte-text) 32%,
    transparent
  );
  --md-default-fg-color--lightest: color-mix(
    in srgb,
    var(--ctp-latte-text) 18%,
    transparent
  );
  --md-default-bg-color: var(--ctp-latte-base);
  --md-default-bg-color--light: color-mix(
    in srgb,
    var(--ctp-latte-base) 54%,
    transparent
  );
  --md-default-bg-color--lighter: color-mix(
    in srgb,
    var(--ctp-latte-base) 26%,
    transparent
  );
  --md-default-bg-color--lightest: color-mix(
    in srgb,
    var(--ctp-latte-base) 7%,
    transparent
  );

  --md-code-fg-color: var(--ctp-latte-text);
  --md-code-bg-color: var(--ctp-latte-crust);
  --md-code-hl-color: var(--ctp-latte-lavender);
  --md-code-hl-number-color: var(--ctp-latte-peach);
  --md-code-hl-special-color: var(--ctp-latte-pink);
  --md-code-hl-function-color: var(--ctp-latte-blue);
  --md-code-hl-constant-color: var(--ctp-latte-peach);
  --md-code-hl-keyword-color: var(--ctp-latte-mauve);
  --md-code-hl-string-color: var(--ctp-latte-green);
  --md-code-hl-name-color: color-mix(
    in srgb,
    var(--ctp-latte-text) 60%,
    var(--ctp-latte-teal)
  );
  --md-code-hl-operator-color: var(--ctp-latte-sky);
  --md-code-hl-punctuation-color: var(--ctp-latte-overlay2);
  --md-code-hl-comment-color: var(--ctp-latte-overlay2);
  --md-code-hl-generic-color: var(--ctp-latte-text);
  --md-code-hl-variable-color: color-mix(
    in srgb,
    var(--ctp-latte-text) 60%,
    var(--ctp-latte-red)
  );

  --doc-symbol-parameter-fg-color: var(--ctp-latte-maroon);
  --doc-symbol-attribute-fg-color: var(--ctp-latte-yellow);
  --doc-symbol-function-fg-color: var(--ctp-latte-blue);
  --doc-symbol-method-fg-color: var(--ctp-latte-blue);
  --doc-symbol-class-fg-color: var(--ctp-latte-yellow);
  --doc-symbol-module-fg-color: var(--ctp-latte-red);

  --doc-symbol-parameter-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-maroon) 20%,
    transparent
  );
  --doc-symbol-attribute-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-yellow) 20%,
    transparent
  );
  --doc-symbol-function-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-blue) 20%,
    transparent
  );
  --doc-symbol-method-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-blue) 20%,
    transparent
  );
  --doc-symbol-class-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-yellow) 20%,
    transparent
  );
  --doc-symbol-module-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-red) 20%,
    transparent
  );

  --md-primary-fg-color: var(--ctp-latte-lavender);
  --md-primary-fg-color--light: color-mix(
    in srgb,
    var(--ctp-latte-base) 10%,
    var(--ctp-latte-lavender)
  );
  --md-primary-fg-color--dark: color-mix(
    in srgb,
    var(--ctp-latte-base) 20%,
    var(--ctp-latte-lavender)
  );
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color: var(--ctp-latte-rosewater);
  --md-accent-fg-color--transparent: #f500561a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;

  --md-typeset-color: var(--ctp-latte-text);
  --md-typeset-a-color: var(--ctp-latte-blue);
  --md-typeset-del-color: color-mix(
    in srgb,
    var(--ctp-latte-red) 75%,
    transparent
  );
  --md-typeset-ins-color: color-mix(
    in srgb,
    var(--ctp-latte-green) 75%,
    transparent
  );
  --md-typeset-kbd-color: hsl(var(--md-hue), 15%, 90%, 0.12);
  --md-typeset-kbd-accent-color: hsl(var(--md-hue), 15%, 90%, 0.2);
  --md-typeset-kbd-border-color: hsl(var(--md-hue), 15%, 14%, 1);
  --md-typeset-mark-color: var(--ctp-latte-lavender);
  --md-typeset-table-color: var(--ctp-latte-surface1);
  --md-typeset-table-color--light: color-mix(
    in srgb,
    var(--ctp-latte-overlay2) 20%,
    transparent
  );

  --md-admonition-fg-color: var(--ctp-latte-text);
  --md-admonition-bg-color: var(--ctp-latte-base);

  --md-footer-bg-color: color-mix(
    in srgb,
    var(--ctp-latte-overlay0) 87%,
    transparent
  );
  --md-footer-bg-color--dark: var(--ctp-latte-overlay0);
}

[data-md-color-scheme="latte"] .highlight [data-linenos]:before {
  color: var(--ctp-latte-overlay1);
}

[data-md-color-scheme="macchiato"] {
  --md-hue: 231.818;
  --md-default-fg-color: var(--ctp-macchiato-text);
  --md-default-fg-color--light: color-mix(
    in srgb,
    var(--ctp-macchiato-text) 62%,
    transparent
  );
  --md-default-fg-color--lighter: color-mix(
    in srgb,
    var(--ctp-macchiato-text) 32%,
    transparent
  );
  --md-default-fg-color--lightest: color-mix(
    in srgb,
    var(--ctp-macchiato-text) 18%,
    transparent
  );
  --md-default-bg-color: var(--ctp-macchiato-base);
  --md-default-bg-color--light: color-mix(
    in srgb,
    var(--ctp-macchiato-base) 54%,
    transparent
  );
  --md-default-bg-color--lighter: color-mix(
    in srgb,
    var(--ctp-macchiato-base) 26%,
    transparent
  );
  --md-default-bg-color--lightest: color-mix(
    in srgb,
    var(--ctp-macchiato-base) 7%,
    transparent
  );

  --md-code-fg-color: var(--ctp-macchiato-text);
  --md-code-bg-color: var(--ctp-macchiato-crust);
  --md-code-hl-color: var(--ctp-macchiato-lavender);
  --md-code-hl-number-color: var(--ctp-macchiato-peach);
  --md-code-hl-special-color: var(--ctp-macchiato-pink);
  --md-code-hl-function-color: var(--ctp-macchiato-blue);
  --md-code-hl-constant-color: var(--ctp-macchiato-peach);
  --md-code-hl-keyword-color: var(--ctp-macchiato-mauve);
  --md-code-hl-string-color: var(--ctp-macchiato-green);
  --md-code-hl-name-color: color-mix(
    in srgb,
    var(--ctp-macchiato-text) 60%,
    var(--ctp-macchiato-teal)
  );
  --md-code-hl-operator-color: var(--ctp-macchiato-sky);
  --md-code-hl-punctuation-color: var(--ctp-macchiato-overlay2);
  --md-code-hl-comment-color: var(--ctp-macchiato-overlay2);
  --md-code-hl-generic-color: var(--ctp-macchiato-text);
  --md-code-hl-variable-color: color-mix(
    in srgb,
    var(--ctp-macchiato-text) 60%,
    var(--ctp-macchiato-red)
  );

  --doc-symbol-parameter-fg-color: var(--ctp-macchiato-maroon);
  --doc-symbol-attribute-fg-color: var(--ctp-macchiato-yellow);
  --doc-symbol-function-fg-color: var(--ctp-macchiato-blue);
  --doc-symbol-method-fg-color: var(--ctp-macchiato-blue);
  --doc-symbol-class-fg-color: var(--ctp-macchiato-yellow);
  --doc-symbol-module-fg-color: var(--ctp-macchiato-red);

  --doc-symbol-parameter-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-maroon) 20%,
    transparent
  );
  --doc-symbol-attribute-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-yellow) 20%,
    transparent
  );
  --doc-symbol-function-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-blue) 20%,
    transparent
  );
  --doc-symbol-method-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-blue) 20%,
    transparent
  );
  --doc-symbol-class-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-yellow) 20%,
    transparent
  );
  --doc-symbol-module-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-red) 20%,
    transparent
  );

  --md-primary-fg-color: var(--ctp-macchiato-lavender);
  --md-primary-fg-color--light: color-mix(
    in srgb,
    var(--ctp-macchiato-base) 10%,
    var(--ctp-macchiato-lavender)
  );
  --md-primary-fg-color--dark: color-mix(
    in srgb,
    var(--ctp-macchiato-base) 20%,
    var(--ctp-macchiato-lavender)
  );
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;

  --md-accent-fg-color: var(--ctp-macchiato-rosewater);
  --md-accent-fg-color--transparent: #f500561a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;

  --md-typeset-color: var(--ctp-macchiato-text);
  --md-typeset-a-color: var(--ctp-macchiato-blue);
  --md-typeset-del-color: color-mix(
    in srgb,
    var(--ctp-macchiato-red) 75%,
    transparent
  );
  --md-typeset-ins-color: color-mix(
    in srgb,
    var(--ctp-macchiato-green) 75%,
    transparent
  );
  --md-typeset-kbd-color: hsl(var(--md-hue), 15%, 90%, 0.12);
  --md-typeset-kbd-accent-color: hsl(var(--md-hue), 15%, 90%, 0.2);
  --md-typeset-kbd-border-color: hsl(var(--md-hue), 15%, 14%, 1);
  --md-typeset-mark-color: var(--ctp-macchiato-lavender);
  --md-typeset-table-color: var(--ctp-macchiato-surface1);
  --md-typeset-table-color--light: color-mix(
    in srgb,
    var(--ctp-macchiato-overlay2) 20%,
    transparent
  );

  --md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a;
  --md-shadow-z2: 0 0.2rem 0.5rem #00000040, 0 0 0.05rem #00000040;
  --md-shadow-z3: 0 0.2rem 0.5rem #0006, 0 0 0.05rem #00000059;
  color-scheme: dark;

  --md-admonition-fg-color: var(--ctp-macchiato-text);
  --md-admonition-bg-color: var(--ctp-macchiato-base);

  --md-footer-bg-color: color-mix(
    in srgb,
    var(--ctp-macchiato-overlay0) 87%,
    transparent
  );
  --md-footer-bg-color--dark: var(--ctp-macchiato-overlay0);
}

[data-md-color-scheme="macchiato"] .highlight [data-linenos]:before {
  color: var(--ctp-macchiato-overlay1);
}