/* ============================================================
   NOTHING OS THEME — red accent variant
   Loaded after each page's own stylesheet so these variables win.
   ============================================================ */

:root,
html.dark-mode {
    --ink: #f5f5f0;
    --paper: #050505;
    --mid: #121212;
    --gray: #8a8a8a;
    --border: 1px solid #e60012;
    --accent: #e60012;
    --social-icon-filter: invert(1);
    --social-icon-filter-hover: none;
}

/* Light variant (used when the visitor's chess choice is "white") */
html.side-white:not(.dark-mode) {
    --ink: #050505;
    --paper: #f5f5f0;
    --mid: #e7e7e0;
    --gray: #5a5a5a;
    --border: 1px solid #e60012;
    --accent: #e60012;
    --social-icon-filter: none;
    --social-icon-filter-hover: invert(1);
}

body {
    font-family: 'DotGothic16', 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.02em;
    background-image:
        radial-gradient(circle, rgba(230, 0, 18, 0.14) 1px, transparent 1px);
    background-size: 14px 14px;
}

.logo,
h1, h2, h3 {
    font-family: 'DotGothic16', 'JetBrains Mono', monospace !important;
    letter-spacing: 0.06em;
}

.logo {
    color: var(--accent) !important;
}

.logo::before {
    content: "● ";
    color: var(--accent);
    font-size: 0.6em;
    vertical-align: middle;
}

nav a {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
}

nav a:hover {
    color: var(--accent) !important;
}

.btn-solid {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #050505 !important;
}

.btn {
    border-color: var(--accent) !important;
}

.btn:hover {
    background: var(--accent) !important;
    color: #050505 !important;
}

header {
    border-bottom: 1px dashed var(--accent) !important;
}

::selection {
    background: var(--accent);
    color: #050505;
}