/* ============================================================
   Theme variables (GitHub Primer inspired)
   ============================================================ */
:root {
    --color-bg: #ffffff;
    --color-bg-secondary: #f6f8fa;

    --color-fg: #1f2328;
    --color-fg-muted: #57606a;

    --color-border: #d0d7de;

    --color-link: #0969da;
    --color-link-hover: #0550ae;

    --table-bg: #ffffff;
    --table-header-bg: #f6f8fa;
    --table-row-alt-bg: #f6f8fa;
    --table-border: #d0d7de;
    --table-text: #1f2328;
    --table-code-bg: #f6f8fa;
    --table-code-text: #24292f;

    --highlight-bg: #f6f8fa;
    --syntax-nt-color: #000080;
    --syntax-comment: #6a737d;
    --syntax-keyword: #d73a49;
    --syntax-string: #032f62;
    --syntax-name-tag: #000080;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0d1117;
        --color-bg-secondary: #161b22;

        --color-fg: #e6edf3;
        --color-fg-muted: #8b949e;

        --color-border: #30363d;

        --color-link: #58a6ff;
        --color-link-hover: #79c0ff;

        --table-bg: #0d1117;
        --table-header-bg: #161b22;
        --table-row-alt-bg: #161b22;
        --table-border: #30363d;
        --table-text: #e6edf3;
        --table-code-bg: #21262d;
        --table-code-text: #c9d1d9;

        --highlight-bg: #21262d;
        --syntax-nt-color: #79c0ff;
        --syntax-comment: #8b949e;
        --syntax-keyword: #ff7b72;
        --syntax-string: #a5d6ff;
        --syntax-name-tag: #79c0ff;
    }
}

/* ============================================================
   Global layout
   ============================================================ */
html {
    color-scheme: light dark;
}

body {
    margin: 0;

    background: var(--color-bg);
    color: var(--color-fg);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.5;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ============================================================
   Layout components
   ============================================================ */
header {
    background: var(--color-bg-secondary);

    border-bottom:
        1px solid var(--color-border);
}

footer {
    color: var(--color-fg-muted);

    border-top:
        1px solid var(--color-border);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-fg);
}

body > .markdown-body h2 {
  border-bottom: none
}

p {
  color: var(--color-fg);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

.text-muted {
  color: var(--color-fg-muted);
}

/* ============================================================
   Table
   ============================================================ */
body > .markdown-body table {
    background: var(--table-bg);
    color: var(--table-text);
}

body > .markdown-body table thead,
body > .markdown-body table thead tr {
    background: var(--table-header-bg);
}

body > .markdown-body table tbody tr {
    background: var(--table-bg);
}

body > .markdown-body table tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg);
}

body > .markdown-body table th,
body > .markdown-body table td {
    color: var(--table-text);
    border-color: var(--table-border);
}

body > .markdown-body td code {
    padding: .15em .35em;

    border-radius: 4px;

    background: var(--table-code-bg);
    color: var(--table-code-text);

    font-size: .9em;
}

/* ============================================================
   Highlight
   ============================================================ */
body > .markdown-body .highlight,
body > .markdown-body .highlight pre,
body > .markdown-body pre {
  background-color: var(--highlight-bg);
}

body > .markdown-body .highlight {
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

body > .markdown-body .highlight .c {
    color: var(--syntax-comment);
}

body > .markdown-body .highlight .k {
    color: var(--syntax-keyword);
}

body > .markdown-body .highlight .s {
    color: var(--syntax-string);
}

body > .markdown-body .highlight .nt {
    color: var(--syntax-name-tag);
}