@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "IBMPlexMono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"),
    url("../fonts/IBMPlexMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sk-primary: #96a026;
  --sk-ink: #1e293b;
  --sk-muted: #64748b;
  --sk-faint: #94a3b8;
  --sk-line: #e2e8f0;
  --sk-bg-soft: rgba(150, 160, 38, 0.05);
  --sk-bg-pill: rgba(150, 160, 38, 0.15);
  --sk-code-bg: #f8fafc;
  --sk-code-comment: #8a94a6;
  --sk-code-preproc: #4f9d93;
  --sk-code-string: #6b9b6f;
  --sk-code-number: #8f80b8;
  --sk-code-keyword: #8f9650;
  --sk-code-qualifier: #b98f52;
  --sk-code-type: #6d8fb0;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--sk-primary);
  --md-primary-fg-color--light: #adb84a;
  --md-primary-fg-color--dark: #747d1b;
  --md-accent-fg-color: var(--sk-primary);
  --md-default-fg-color: var(--sk-ink);
  --md-default-fg-color--light: var(--sk-muted);
  --md-default-bg-color: #ffffff;
  --md-code-bg-color: #f8fafc;
  --md-code-fg-color: var(--sk-ink);
  --sk-code-bg: #f8fafc;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #aab447;
  --md-primary-fg-color--light: #c1c96f;
  --md-primary-fg-color--dark: #89932b;
  --md-accent-fg-color: #c1c96f;
  --md-default-bg-color: #111827;
  --md-default-bg-color--light: #1e293b;
  --md-default-fg-color: #e2e8f0;
  --md-default-fg-color--light: #94a3b8;
  --md-code-bg-color: #0f172a;
  --sk-code-bg: #151b23;
  --sk-code-comment: #7d8aa0;
  --sk-code-preproc: #6fc4b9;
  --sk-code-string: #8bc794;
  --sk-code-number: #b3a4dd;
  --sk-code-keyword: #c3d34a;
  --sk-code-qualifier: #e0ac6c;
  --sk-code-type: #8fb4dd;
}

body,
.md-typeset {
  font-family: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-tabs__link {
  font-family: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.md-typeset h1 {
  font-size: 2.25rem;
  font-weight: 600;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--sk-line);
  padding-bottom: 0.35rem;
}

.md-typeset code,
.md-typeset pre,
.highlight,
.md-clipboard {
  font-family: "IBMPlexMono", ui-monospace, monospace;
}

.highlight {
  background: var(--sk-code-bg);
  border: 1px solid var(--sk-line);
  border-radius: 0.4rem;
}

.highlight pre {
  background: transparent;
  color: var(--md-code-fg-color);
  line-height: 1.55;
}

/* The token palette follows tracer-viz: muted comments, olive keywords,
   cool blue types, green strings, and restrained violet numbers. */
.highlight .c,
.highlight .ch,
.highlight .cm,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: var(--sk-code-comment);
}

.highlight .cp {
  color: var(--sk-code-preproc);
}

.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .s1 {
  color: var(--sk-code-string);
}

.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: var(--sk-code-number);
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--sk-code-keyword);
}

.highlight .nf,
.highlight .fm,
.highlight .na,
.highlight .nv {
  color: var(--sk-code-qualifier);
}

.highlight .nc,
.highlight .nn,
.highlight .nt {
  color: var(--sk-code-type);
}

.highlight .o,
.highlight .ow {
  color: var(--md-default-fg-color--light);
}

.md-header,
.md-tabs {
  background: var(--sk-primary);
}

.md-header {
  box-shadow: 0 1px 0 rgba(30, 41, 59, 0.12);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover,
.md-typeset a {
  color: var(--sk-primary);
}

.md-typeset a:hover {
  color: #5a6112;
}

.md-typeset .admonition,
.md-typeset details {
  border-left-color: var(--sk-primary);
  background: var(--sk-bg-soft);
}

.md-typeset .md-button {
  border-color: var(--sk-primary);
  border-radius: 0.35rem;
  font-family: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
}

.md-typeset .md-button--primary {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: #fff;
}

.md-typeset table {
  border: 1px solid var(--sk-line);
}

.md-typeset table th {
  background: var(--sk-bg-soft);
}

.md-typeset table tr:hover {
  background: var(--sk-bg-soft);
}

::selection {
  background: var(--sk-bg-pill);
  color: var(--sk-ink);
}