/* ===== Theme tokens ===== */
:root {
    --paper-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --bg-color: #f5f5f5;
    --text-color: #24292f;
    --text-muted: #57606a;
    --link-color: #0969da;
    --icon-color: #24292f;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --active-bg: rgba(0, 0, 0, 0.1);

    color-scheme: light;
}

/* Circuit board pattern - light theme (dark copper traces on light bg) */
:root {
    --bg-pattern: url("data:image/svg+xml,%3Csvg width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z%22 fill=%22%23b8c4cc%22 fill-opacity=%220.5%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E");
}

/* ===== Base Styles ===== */
body,
html {
    background-color: var(--bg-color);
    background-image: var(--bg-pattern);
    font-family: 'Noto Sans', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* Smooth theme transition */
body,
.navbar,
.paper-container,
.paper-card,
.navbar-item {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ===== Layout Components ===== */
main {
    padding-bottom: 1rem;
}

/* ===== Paper Components ===== */
.paper-container {
    background: var(--paper-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    border-radius: 8px;
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.paper-card {
    background: var(--paper-color);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: transform 0.2s ease;
}

.paper-card:hover {
    transform: translateY(-2px);
}

/* ===== Navigation ===== */
.navbar {
    background: var(--paper-color);
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 auto;
    max-width: 900px;
    border-radius: 0 0 8px 8px;
}

.navbar-item strong {
    font-family: 'ZCOOL QingKe HuangYou', cursive;
    color: var(--text-color);
}

/* Force all navbar text to theme color in dark mode (Bulma defaults are too dark) */
:root[data-theme="dark"] .navbar-item,
:root[data-theme="dark"] .navbar-link,
:root[data-theme="dark"] .navbar-item strong {
    color: #e6edf3 !important;
}

/* Navbar item hover/focus/active states - theme-aware */
.navbar-item:hover,
.navbar-item:focus,
.navbar-link:hover,
.navbar-link:focus {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

.navbar-item:active,
.navbar-link:active {
    background-color: var(--active-bg) !important;
}

/* Remove lingering focus highlight on mouse click while keeping keyboard a11y */
#theme-toggle:focus:not(:focus-visible) {
    background-color: transparent !important;
}
#theme-toggle:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Theme toggle icon inherits text color */
#theme-toggle .icon,
#theme-icon {
    color: var(--icon-color);
}

/* ===== Typography ===== */
.title,
.content {
    color: var(--text-color);
}

.has-text-grey {
    color: var(--text-muted) !important;
}

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

/* ===== Responsive Design ===== */
@media screen and (max-width: 768px) {
    .paper-container {
        margin: 1rem;
        padding: 1rem;
    }

    .navbar {
        margin: 0 1rem;
    }

    .navbar-menu {
        position: absolute;
        width: calc(100% - 2rem);
        left: 1rem;
        margin-top: 0.5rem;
        background: var(--paper-color);
        box-shadow: 0 4px 12px var(--shadow-color);
        border-radius: 8px;
        padding: 1rem;
    }
}

/* ===== Dark Mode ===== */
:root[data-theme="dark"] {
    --paper-color: #161b22;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --bg-color: #0d1117;
    --text-color: #e6edf3;
    --text-muted: #9ea7b3;
    --link-color: #6cb2ff;
    --icon-color: #e6edf3;
    --hover-bg: rgba(255, 255, 255, 0.08);
    --active-bg: rgba(255, 255, 255, 0.14);

    /* Circuit board pattern - dark theme (subtle green traces like a real PCB) */
    --bg-pattern: url("data:image/svg+xml,%3Csvg width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z%22 fill=%22%23e6edf3%22 fill-opacity=%220.07%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E");

    color-scheme: dark;
}

/* Bulma is-light buttons in dark mode */
:root[data-theme="dark"] .button.is-light {
    background-color: #21262d;
    color: #e6edf3;
    border-color: #30363d;
}

:root[data-theme="dark"] .button.is-light:hover {
    background-color: #30363d;
}