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

:root {
    --kagan-bg: #000000;
    --kagan-surface: #000000;
    --kagan-panel: #000000;
    --kagan-border: #2a3342;
    --kagan-text: #c5cdd9;
    --kagan-muted: #5c6773;
    --kagan-primary: #3fb58e;
    --kagan-secondary: #d4a84b;
    --kagan-accent: #4ec9b0;
    --kagan-link: #6fa3d4;
    --kagan-link-hover: #4ec9b0;
    --kagan-code-bg: #000000;
    --kagan-radius: 0px;
    --kagan-shadow: none;
    --kagan-font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
    --kagan-font-mono: "JetBrains Mono", "Iosevka", "Fira Mono", "SFMono-Regular", "Menlo",
        "Consolas", "Liberation Mono", monospace;
}

html,
body {
    background: var(--kagan-bg) !important;
    color: var(--kagan-text);
}

body {
    font-family: var(--kagan-font-mono);
    line-height: 1.7;
    font-size: 16px;
    background-image: none;
}

::selection {
    background: rgba(63, 181, 142, 0.65);
    color: #0f1419;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--kagan-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--kagan-border);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kagan-primary);
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--kagan-text);
    letter-spacing: 0.1em;
    font-family: var(--kagan-font-display);
    text-transform: uppercase;
}

h1 {
    color: var(--kagan-primary);
}

h2 {
    color: var(--kagan-secondary);
}

h3 {
    color: var(--kagan-accent);
}

a {
    color: var(--kagan-link);
    text-decoration: underline;
    text-decoration-color: rgba(111, 163, 212, 0.4);
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--kagan-link-hover);
    text-decoration-color: rgba(78, 201, 176, 0.6);
}

hr {
    border-color: var(--kagan-border);
}

.navbar,
.navbar.bg-primary {
    background: #000000 !important;
    border-bottom: 2px solid var(--kagan-border);
    box-shadow: none;
    backdrop-filter: none;
}

.navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color: var(--kagan-text) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.08em;
    word-spacing: -0.12em;
    color: var(--kagan-primary) !important;
    font-family: var(--kagan-font-display);
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--kagan-primary) !important;
}

.navbar-nav .active > .nav-link,
.navbar-nav .nav-link.active {
    color: var(--kagan-secondary) !important;
}

.navbar .fa,
.navbar .glyphicon {
    color: var(--kagan-muted);
}

.navbar .fa:hover,
.navbar .glyphicon:hover {
    color: var(--kagan-primary);
}

.navbar .navbar-toggler {
    border-color: var(--kagan-border);
}

.bs-sidebar {
    background: var(--kagan-surface);
    border: 2px solid var(--kagan-border);
    border-radius: 0;
    padding: 0.75rem 0.5rem;
    box-shadow: none;
}

.col-md-9 {
    background: #000000;
    border: 2px solid var(--kagan-border);
    border-radius: 0;
    padding: 1.75rem 2.25rem;
    box-shadow: none;
}

.col-md-9 > :first-child {
    margin-top: 0;
}

.col-md-9 > :last-child {
    margin-bottom: 0;
}

.bs-sidebar .nav-link,
.bs-sidebar .nav > li > a {
    color: var(--kagan-text);
}

.bs-sidebar .nav-link:hover,
.bs-sidebar .nav-link:focus,
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
    background: rgba(63, 181, 142, 0.12);
    color: var(--kagan-primary);
}

.bs-sidebar .nav-item.active > .nav-link,
.bs-sidebar .nav > li.active > a {
    background: transparent;
    color: var(--kagan-primary);
    border-left: 2px solid var(--kagan-primary);
}

.tocify,
.toc {
    border-left: 2px solid var(--kagan-border);
}

code,
pre,
kbd,
samp {
    color: var(--kagan-text);
    font-family: var(--kagan-font-mono);
}

code {
    background: var(--kagan-code-bg);
    border: 2px solid var(--kagan-border);
    border-radius: 0;
    padding: 0.1rem 0.35rem;
}

pre {
    background: var(--kagan-code-bg);
    border: 2px solid var(--kagan-border);
    border-radius: 0;
    padding: 0.85rem 1.1rem;
    box-shadow: none;
}

pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

kbd {
    background: var(--kagan-panel);
    border: 2px solid var(--kagan-border);
    border-radius: 0;
    padding: 0.1rem 0.35rem;
    box-shadow: none;
}

.form-control {
    background: var(--kagan-surface);
    border: 2px solid var(--kagan-border);
    color: var(--kagan-text);
}

.form-control:focus {
    background: var(--kagan-panel);
    border-color: var(--kagan-primary);
    color: var(--kagan-text);
    box-shadow: none;
}

.hljs {
    background: var(--kagan-code-bg) !important;
}

table {
    border-color: var(--kagan-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    overflow: hidden;
}

table th,
table td {
    border-color: var(--kagan-border) !important;
}

table thead th {
    background: var(--kagan-panel);
    color: var(--kagan-text);
}

table tbody tr:nth-child(odd) {
    background: var(--kagan-surface);
}

blockquote {
    border-left: 4px solid var(--kagan-secondary);
    color: var(--kagan-muted);
    background: var(--kagan-surface);
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    background: var(--kagan-primary) !important;
    border-color: var(--kagan-primary) !important;
    color: #0f1419 !important;
}

.btn-primary:hover {
    background: var(--kagan-accent) !important;
    border-color: var(--kagan-accent) !important;
}

.alert,
.admonition {
    background: var(--kagan-surface);
    border: 2px solid var(--kagan-border);
    color: var(--kagan-text);
    border-radius: 0;
}

footer {
    color: var(--kagan-muted);
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0.25rem 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

footer a {
    color: var(--kagan-link);
}
