@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
    --body-font-family: "Inter", sans-serif;
    --heading-font-family: "Inter", sans-serif;

    /* Colors — edit these */
    --color-body-text: #000000;
    --color-heading: ;
    --color-link: #4a90d9;
    --color-link-hover: #01172f;
    --color-nav-link: #000000;
    --color-nav-link-active: #01172f;
    --color-site-title: ;
    --color-footer-text: ;
    --color-code-text: ;
    --color-body-background: ;
    --color-sidebar-background: ;
    --color-border: ;
    /* existing variables... */
    --nav-active-link-color: #4a90d9;
}

/* Active/selected nav item */
.nav-list-link.active {
    color: var(--nav-active-link-color) !important;
}

/* Expand/collapse arrow */
.nav-list-expander svg {
    fill: #000000;
}

.nav-list-expander:hover svg {
    fill: #000000;
}

/* Font */
body,
p,
li,
td,
th,
blockquote,
label,
input,
textarea,
select,
button,
.nav-list-item a,
.nav-list-link,
.site-title,
.site-nav,
.search-input,
.breadcrumb-nav,
.breadcrumb-nav-list-item,
.footer,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", sans-serif;
}

/* Body text */
body,
p,
li,
td,
th {
    color: var(--color-body-text);
}

/* Links */
a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-link-hover);
}

/* Navigation */
.nav-list-item a,
.nav-list-link {
    color: var(--color-nav-link);
}
.nav-list-link.active {
    color: var(--color-nav-link-active);
}

/* Site title */
.site-title {
    color: var(--color-site-title);
}

/* Footer */
.site-footer {
    color: var(--color-footer-text);
}

/* Code */
code {
    color: var(--color-code-text);
}

/* Backgrounds */
body {
    background-color: var(--color-body-background);
}
.side-bar {
    background-color: var(--color-sidebar-background);
}

/* Borders */
.side-bar,
.main-content {
    border-color: var(--color-border);
}