/* Theme CSS variables — Light (default), Dark, Sepia */

:root {
    --bg-page: #f7f7f7;
    --bg-surface: #fff;
    --bg-surface-alt: #fafafa;
    --bg-surface-alt2: #f3f3f3;
    --bg-code: #f5f5f5;
    --bg-code-inline: #f0f0f0;
    --bg-hover: #f1f6ff;
    --bg-hover-alt: #e8e8e8;
    --bg-accent: #e8f0fe;
    --bg-accent-active: #d3e3fd;
    --bg-mark: #fff3a8;
    --bg-warning: #fff3cd;
    --bg-drop-delete: #fdd;
    --bg-active-btn: #dbeafe;

    --text-primary: #222;
    --text-secondary: #555;
    --text-muted: #777;
    --text-faint: #999;
    --text-very-faint: #aaa;
    --text-light: #888;
    --text-filename: #333;
    --text-warning: #856404;
    --text-h6: #666;

    --link-color: #0b65d8;
    --link-color-preview: #0366d6;

    --border-light: #eee;
    --border-default: #ddd;
    --border-medium: #ccc;
    --border-dark: #bbb;
    --border-code: #e0e0e0;
    --border-accent: #a8c7fa;
    --border-active-btn: #93b4e8;

    --accent-primary: #4285f4;
    --accent-primary-hover: #3367d6;
    --accent-danger: #d93025;
    --accent-danger-hover: #b71c1c;

    --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-modal: 0 12px 40px rgba(0,0,0,0.25);
    --shadow-focus: 0 0 0 2px rgba(66,133,244,0.15);
    --shadow-focus-strong: 0 0 0 2px rgba(66,133,244,0.2);
    --modal-overlay: rgba(0,0,0,0.35);
    --th-hover: #eef2f7;
    --icon-filter: none;

    /* Syntax-highlight tokens (typst-syntax tags) */
    --code-comment:      #7c7c7c;
    --code-punct:        inherit;
    --code-escape:       #c0392b;
    --code-strong:       #1a1a1a;
    --code-emph:         #4a4a4a;
    --code-link:         #1860a8;
    --code-raw:          #45556c;
    --code-label:        #7c7c7c;
    --code-ref:          #2d62d6;
    --code-heading:      #1a1a1a;
    --code-marker:       #b6328e;
    --code-term:         #1a1a1a;
    --code-math-delim:   #b6328e;
    --code-math-op:      #444;
    --code-keyword:      #b6328e;
    --code-op:           #444;
    --code-number:       #b3741b;
    --code-string:       #c0392b;
    --code-function:     #2d62d6;
    --code-interpolated: #b6328e;
}

[data-theme="dark"] {
    --bg-page: #1e1e1e;
    --bg-surface: #2b2b2b;
    --bg-surface-alt: #252525;
    --bg-surface-alt2: #222;
    --bg-code: #1a1a1a;
    --bg-code-inline: #333;
    --bg-hover: #333340;
    --bg-hover-alt: #3a3a3a;
    --bg-accent: #2a3a55;
    --bg-accent-active: #2e4470;
    --bg-mark: #665a10;
    --bg-warning: #4a3f10;
    --bg-drop-delete: #4a2020;
    --bg-active-btn: #2a3a55;

    --text-primary: #ddd;
    --text-secondary: #aaa;
    --text-muted: #888;
    --text-faint: #666;
    --text-very-faint: #666;
    --text-light: #777;
    --text-filename: #ccc;
    --text-warning: #f0d060;
    --text-h6: #888;

    --link-color: #6cb6ff;
    --link-color-preview: #6cb6ff;

    --border-light: #3a3a3a;
    --border-default: #444;
    --border-medium: #555;
    --border-dark: #666;
    --border-code: #444;
    --border-accent: #4a6090;
    --border-active-btn: #506090;

    --accent-primary: #4a90f4;
    --accent-primary-hover: #5a9aff;
    --accent-danger: #f44336;
    --accent-danger-hover: #ff5544;

    --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-modal: 0 12px 40px rgba(0,0,0,0.5);
    --shadow-focus: 0 0 0 2px rgba(100,150,255,0.25);
    --shadow-focus-strong: 0 0 0 2px rgba(100,150,255,0.3);
    --modal-overlay: rgba(0,0,0,0.6);
    --th-hover: #333;
    --icon-filter: invert(0.85);

    --code-comment:      #8a8a8a;
    --code-punct:        inherit;
    --code-escape:       #ce9178;
    --code-strong:       #f0f0f0;
    --code-emph:         #cccccc;
    --code-link:         #569cd6;
    --code-raw:          #a8b3c4;
    --code-label:        #888;
    --code-ref:          #61afef;
    --code-heading:      #e5c07b;
    --code-marker:       #c586c0;
    --code-term:         #e5c07b;
    --code-math-delim:   #c586c0;
    --code-math-op:      #d4d4d4;
    --code-keyword:      #c586c0;
    --code-op:           #d4d4d4;
    --code-number:       #b5cea8;
    --code-string:       #ce9178;
    --code-function:     #4ec9b0;
    --code-interpolated: #c586c0;
}

[data-theme="sepia"] {
    --bg-page: #f4ecd8;
    --bg-surface: #faf5e9;
    --bg-surface-alt: #f0e8d4;
    --bg-surface-alt2: #ece4d0;
    --bg-code: #ede5d0;
    --bg-code-inline: #ede5d0;
    --bg-hover: #eee4c8;
    --bg-hover-alt: #e6dcc4;
    --bg-accent: #e0d4b0;
    --bg-accent-active: #d8cab0;
    --bg-mark: #e8d090;
    --bg-warning: #e8dca0;
    --bg-drop-delete: #e8c8b8;
    --bg-active-btn: #ddd4c0;

    --text-primary: #433422;
    --text-secondary: #6b5b45;
    --text-muted: #8b7b65;
    --text-faint: #a09080;
    --text-very-faint: #a09080;
    --text-light: #9b8b75;
    --text-filename: #5b4b35;
    --text-warning: #6b5a10;
    --text-h6: #8b7b65;

    --link-color: #8b5e14;
    --link-color-preview: #8b5e14;

    --border-light: #ddd4c0;
    --border-default: #d0c8b4;
    --border-medium: #c0b8a4;
    --border-dark: #b0a894;
    --border-code: #d0c8b0;
    --border-accent: #c0a870;
    --border-active-btn: #b0a070;

    --accent-primary: #b08030;
    --accent-primary-hover: #997020;
    --accent-danger: #c04030;
    --accent-danger-hover: #a03020;

    --shadow-dropdown: 0 4px 12px rgba(60,40,0,0.15);
    --shadow-modal: 0 12px 40px rgba(60,40,0,0.25);
    --shadow-focus: 0 0 0 2px rgba(140,100,30,0.2);
    --shadow-focus-strong: 0 0 0 2px rgba(140,100,30,0.25);
    --modal-overlay: rgba(60,40,0,0.35);
    --th-hover: #e8e0cc;
    --icon-filter: none;

    --code-comment:      #8b7b65;
    --code-punct:        inherit;
    --code-escape:       #a63a14;
    --code-strong:       #3a2a1a;
    --code-emph:         #5b4b35;
    --code-link:         #2d62a8;
    --code-raw:          #5b5040;
    --code-label:        #8b7b65;
    --code-ref:          #2d62a8;
    --code-heading:      #3a2a1a;
    --code-marker:       #8b4513;
    --code-term:         #3a2a1a;
    --code-math-delim:   #8b4513;
    --code-math-op:      #5b4b35;
    --code-keyword:      #8b4513;
    --code-op:           #5b4b35;
    --code-number:       #9c5d10;
    --code-string:       #a63a14;
    --code-function:     #2d62a8;
    --code-interpolated: #8b4513;
}

/* Icon filter for dark/sepia themes */
.toolbar-icon,
.entry-icon {
    filter: var(--icon-filter);
}

/* Theme selector in gear dropdown */
.theme-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
}

.theme-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 6px;
}

.theme-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
}

.theme-btn:hover {
    background: var(--bg-hover-alt);
}

.theme-btn.active,
.lang-btn.active {
    background: var(--bg-accent-active);
    border-color: var(--border-accent);
}

.lang-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
}

.lang-btn:hover {
    background: var(--bg-hover-alt);
}