/*******************************************************************************
THEME CONFIGURATION
主题配置 - 深色/浅色模式切换

This file contains all styles related to light/dark theme switching.
*******************************************************************************/

/*******************************************************************************
CSS CUSTOM PROPERTIES (Theme Variables)
*******************************************************************************/

:root {
    /* Light mode colors (default) */
    --theme-bg: #e1e9f6;
    --theme-text: #111;
    --theme-heading: #111;
    --theme-code-bg: #d3e1f4;
    --theme-code-text: inherit;
    --theme-code-border: #c9d7ea;
    --theme-pre-bg: #d3e1f4;
    --theme-pre-border: #c9d7ea;
    --theme-line-numbers-border: #b8c9e0;
    --theme-line-numbers-text: #8a9bb5;
    --theme-copy-btn-bg: #eaf0f9;
    --theme-copy-btn-text: #4a6080;
    --theme-copy-btn-border: #b8c9e0;
    --theme-copy-btn-hover-bg: #dce6f3;
    --theme-copy-btn-hover-text: #2a4060;
    --theme-copy-btn-copied-bg: #e6fffa;
    --theme-copy-btn-copied-text: #008000;
    --theme-copy-btn-copied-border: #008000;
    --theme-table-border: #b8c9e0;
    --theme-table-header-bg: #dce6f3;
    --theme-table-row-even: #e8eff8;
    --theme-table-row-hover: #dce6f3;
    --theme-math-filter: none;
    --theme-icon-filter: none;
}

/* Dark mode variables */
html[data-theme="dark"] {
    --theme-bg: #0f1a2e;
    --theme-text: #ddd;
    --theme-heading: #eee;
    --theme-code-bg: #162040;
    --theme-code-text: #e8e8e8;
    --theme-code-border: #1e2d50;
    --theme-pre-bg: #162040;
    --theme-pre-border: #1e2d50;
    --theme-line-numbers-border: #2a3a5c;
    --theme-line-numbers-text: #4a6080;
    --theme-copy-btn-bg: #1a2844;
    --theme-copy-btn-text: #a0b4cc;
    --theme-copy-btn-border: #2a3a5c;
    --theme-copy-btn-hover-bg: #223050;
    --theme-copy-btn-hover-text: #d0dcea;
    --theme-copy-btn-copied-bg: #1a4d3a;
    --theme-copy-btn-copied-text: #5fda9d;
    --theme-copy-btn-copied-border: #5fda9d;
    --theme-table-border: #2a3a5c;
    --theme-table-header-bg: #1a2844;
    --theme-table-row-even: #131e35;
    --theme-table-row-hover: #1e2d50;
    --theme-math-filter: invert(1) hue-rotate(180deg);
    --theme-icon-filter: invert(1);
}

/* Light is always the default; user can toggle to dark via the button. */


/*******************************************************************************
THEME STYLES (using CSS variables)
*******************************************************************************/

html {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--theme-heading) !important;
}

a,
a:link,
a:visited {
    color: inherit !important;
    background-color: transparent !important;
    text-shadow: none !important;
    background-image: none !important;
    border-bottom: dashed 1px !important;
}

a:hover {
    color: var(--theme-copy-btn-hover-text) !important;
}

code {
    background-color: var(--theme-code-bg) !important;
    color: var(--theme-code-text) !important;
    border-color: var(--theme-code-border) !important;
}

pre {
    background-color: var(--theme-pre-bg) !important;
    border-color: var(--theme-pre-border) !important;
}

pre>code {
    color: var(--theme-code-text) !important;
}

.line-numbers-rows {
    border-right-color: var(--theme-line-numbers-border) !important;
    color: var(--theme-line-numbers-text) !important;
}

.copy-button {
    background-color: var(--theme-copy-btn-bg) !important;
    color: var(--theme-copy-btn-text) !important;
    border-color: var(--theme-copy-btn-border) !important;
}

.copy-button:hover {
    background-color: var(--theme-copy-btn-hover-bg) !important;
    color: var(--theme-copy-btn-hover-text) !important;
}

.copy-button.copied {
    background-color: var(--theme-copy-btn-copied-bg) !important;
    color: var(--theme-copy-btn-copied-text) !important;
    border-color: var(--theme-copy-btn-copied-border) !important;
}

div[style*="border-inline-start"] .footnote-ref,
div[style*="border-inline-start"] .marginnote,
div[style*="border-inline-start"] .footnote-ref a {
    color: var(--theme-heading) !important;
}

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

table th,
table thead td {
    background-color: var(--theme-table-header-bg) !important;
}

table tbody tr:nth-child(even) {
    background-color: var(--theme-table-row-even) !important;
}

table tbody tr:hover {
    background-color: var(--theme-table-row-hover) !important;
}

[role="math"] {
    filter: var(--theme-math-filter) !important;
}

img[src^="data:image/svg"] {
    filter: var(--theme-icon-filter) !important;
}


/*******************************************************************************
THEME TOGGLE BUTTON (DeepWiki Style)
*******************************************************************************/

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease;
    color: #374151;
    margin-left: 1em;
}

.theme-toggle-btn:hover {
    background: var(--highlight-weak, rgba(128, 128, 128, 0.2));
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--highlight-strong, rgba(128, 128, 128, 0.4));
    outline-offset: 2px;
}

.theme-toggle-btn svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* 深色模式下太阳图标颜色 */
.theme-toggle-btn.is-dark {
    color: #d1d5db;
}