@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&display=swap");

:root {
  --tryll-bg: #0a0d12;
  --tryll-surface: #0f1419;
  --tryll-surface-elevated: rgba(255, 255, 255, 0.02);
  --tryll-border: rgba(255, 255, 255, 0.06);
  --tryll-primary: #232e41;
  --tryll-accent: #3b82f6;
  --tryll-accent-border: rgba(59, 130, 246, 0.3);
  --tryll-fg: #e8eaef;
  --tryll-fg-muted: rgba(232, 234, 239, 0.72);
  --tryll-code-bg: #0d1117;
  --tryll-font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title {
  font-family: var(--tryll-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--tryll-bg);
  --md-default-fg-color: var(--tryll-fg);
  --md-default-fg-color--light: var(--tryll-fg-muted);
  --md-default-fg-color--lighter: rgba(232, 234, 239, 0.5);
  --md-default-fg-color--lightest: rgba(232, 234, 239, 0.12);

  --md-primary-fg-color: var(--tryll-primary);
  --md-primary-fg-color--light: #2e3a50;
  --md-primary-fg-color--dark: #1a2230;
  --md-primary-bg-color: var(--tryll-fg);
  --md-primary-bg-color--light: var(--tryll-fg-muted);

  --md-accent-fg-color: var(--tryll-accent);
  --md-accent-fg-color--transparent: rgba(59, 130, 246, 0.12);
  --md-accent-bg-color: #ffffff;

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

  --md-code-bg-color: var(--tryll-code-bg);
  --md-code-fg-color: #e8eaef;

  --md-footer-bg-color: var(--tryll-surface);
  --md-footer-bg-color--dark: var(--tryll-bg);
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background: var(--tryll-surface-elevated);
  border: 1px solid var(--tryll-border);
  backdrop-filter: blur(8px);
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background: rgba(255, 255, 255, 0.015);
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tryll-border);
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background: var(--tryll-code-bg);
  border: 1px solid var(--tryll-border);
}