/* ===== 3. THEME: LIGHT (modern engineering docs, clean neutral slate) ===== */
[data-theme="light"] {
/* Background layers — neutral white & light technical gray */
--bg: #fcfcfc;
--bg-surface: #f4f5f6;
--bg-card: #ffffff;
--bg-card-hover: #eef1f5;
--bg-elevated: #e4e8ee;
/* Borders — crisp neutral technical gray */
--border: #b3bdcc;
--border-strong: #7d8ba0;
--border-accent: #4f5d72;
/* Text — confident dark neutral charcoal */
--text: #202122;
--text-secondary: #3d4145;
--text-muted: #54595d;
--text-subtle: #646a72;
/* Accent — pure technical engineering blue (no indigo/purple) */
--accent: #3366cc;
--accent-glow: rgba(30, 90, 150, 0.16);
--accent-hover: #2a4f9e;
/* Link — clean technical deep blue */
--link: #3050a0;
--link-glow: rgba(24, 82, 140, 0.14);
/* Semantic status */
--success: #0b7a46;
--success-glow: rgba(11, 122, 70, 0.15);
--warning: #b54708;
--warning-glow: rgba(181, 71, 8, 0.15);
--danger: #b42318;
--danger-glow: rgba(180, 35, 24, 0.15);
/* Code / special blocks — dark neutral technical IDE */
--code-bg: #f4f5f7;
--code-header-bg: #e9ebee;
--mermaid-bg: #fcfcfc;
--modal-bg: #ffffff;
--modal-backdrop: rgba(16, 24, 40, 0.75);
/* Overlays */
--overlay-subtle: rgba(16, 24, 40, 0.03);
--overlay-hover: rgba(16, 24, 40, 0.05);
--stripe-odd: rgba(16, 24, 40, 0.02);
/* Component-specific */
--active-submodule-bg: rgba(30, 90, 150, 0.08);
--active-submodule-border: rgba(30, 90, 150, 0.25);
--active-submodule-list-border: #1e5a96;
--success-border: rgba(11, 122, 70, 0.3);
--danger-border: rgba(180, 35, 24, 0.3);
--accent-border: rgba(30, 90, 150, 0.35);
--accent-subtle-bg: rgba(30, 90, 150, 0.08);
--link-subtle-bg: rgba(24, 82, 140, 0.08);
--module-tag-border: rgba(30, 90, 150, 0.3);
--mermaid-tag-border: rgba(24, 82, 140, 0.3);
--wikilink-border: rgba(24, 82, 140, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(30, 90, 150, 0.25));
--hero-gradient: radial-gradient(circle at top, #eef0f3 0%, var(--bg) 65%);
/* Shadows (crisp & clean) */
--shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06);
--shadow-dropdown: 0 4px 16px rgba(16, 24, 40, 0.12);
/* Prism syntax tokens (Crisp Modern IDE in Light) */
--code-text: #1f1f1f;
--code-comment: #007000;
--code-keyword: #0000ff;
--code-string: #a31515;
--code-number: #07774c;
--code-function: #795e26;
--code-class: #1c6a80;
--code-operator: #1f1f1f;
--code-punctuation: #3b3b3b;
--code-tag: #800000;
--code-inserted: #1e6b30;
/* Mermaid semantic palette (High contrast technical diagram) */
--mm-process-fill: #edf2f8; --mm-process-stroke: #1e5a96; --mm-process-text: #101828;
--mm-success-fill: #e6f6ee; --mm-success-stroke: #0b7a46; --mm-success-text: #053b22;
--mm-error-fill: #feeeee; --mm-error-stroke: #b42318; --mm-error-text: #4e0d08;
--mm-warning-fill: #fef4ea; --mm-warning-stroke: #b54708; --mm-warning-text: #4e1d03;
--mm-entry-fill: #e3eef9; --mm-entry-stroke: #18528c; --mm-entry-text: #0b2542;
--mm-aux-fill: #eaedf2; --mm-aux-stroke: #667085; --mm-aux-text: #101828;
--mm-system-fill: #e4eaf4; --mm-system-stroke: #2e4768; --mm-system-text: #121c29;
--mm-data-fill: #e0f2ec; --mm-data-stroke: #0c7255; --mm-data-text: #063124;
--mm-network-fill: #faeaee; --mm-network-stroke: #a22547; --mm-network-text: #420f1d;
--mm-accent-fill: #dbe9f7; --mm-accent-stroke: #1e5a96; --mm-accent-text: #0d2847;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="light"] .floating-theme-switcher .theme-icon-light { display: block; }
/* Theme-switcher tooltip */
[data-theme="light"] .floating-theme-switcher::after { content: "Light"; }
/* ===== 2. THEME: PAPER (warm aged engineering book / amber terminal) ===== */
[data-theme="paper"] {
/* Background layers — warm aged paper / ivory parchment */
--bg: #f0ecdc;
--bg-surface: #e6dfc8;
--bg-card: #f6f2e4;
--bg-card-hover: #ebe4cf;
--bg-elevated: #e0d8bf;
/* Borders — warm bookbinding & page dividers */
--border: #b9ae90;
--border-strong: #8f8260;
--border-accent: #5e5238;
/* Text — warm charcoal / brown-black */
--text: #2a2418;
--text-secondary: #3d3626;
--text-muted: #5c5240;
--text-subtle: #6e6450;
/* Accent — warm burnt orange / rich amber (zero blue/purple) */
--accent: #b04028;
--accent-glow: rgba(180, 83, 9, 0.16);
--accent-hover: #8f3220;
/* Link — deep warm rust / mahogany brown */
--link: #386898;
--link-glow: rgba(140, 59, 18, 0.14);
/* Semantic status */
--success: #2d663e;
--success-glow: rgba(45, 102, 62, 0.15);
--warning: #a16207;
--warning-glow: rgba(161, 98, 7, 0.15);
--danger: #9f2a2a;
--danger-glow: rgba(159, 42, 42, 0.15);
/* Code — amber terminal aesthetic */
--code-bg: #e4dcc4;
--code-header-bg: #d9d0b5;
--mermaid-bg: #f3efe0;
--modal-bg: #f6f2e4;
--modal-backdrop: rgba(38, 33, 26, 0.78);
/* Overlays */
--overlay-subtle: rgba(40, 32, 20, 0.035);
--overlay-hover: rgba(40, 32, 20, 0.06);
--stripe-odd: rgba(40, 32, 20, 0.025);
/* Component-specific */
--active-submodule-bg: rgba(180, 83, 9, 0.08);
--active-submodule-border: rgba(180, 83, 9, 0.28);
--active-submodule-list-border: #b45309;
--success-border: rgba(45, 102, 62, 0.35);
--danger-border: rgba(159, 42, 42, 0.35);
--accent-border: rgba(180, 83, 9, 0.38);
--accent-subtle-bg: rgba(180, 83, 9, 0.08);
--link-subtle-bg: rgba(140, 59, 18, 0.08);
--module-tag-border: rgba(180, 83, 9, 0.35);
--mermaid-tag-border: rgba(140, 59, 18, 0.35);
--wikilink-border: rgba(140, 59, 18, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(180, 83, 9, 0.25));
--hero-gradient: radial-gradient(circle at top, #e4d7bd 0%, var(--bg) 65%);
/* Shadows (warm & crisp) */
--shadow-card: 0 1px 3px rgba(40, 32, 20, 0.08);
--shadow-dropdown: 0 4px 16px rgba(40, 32, 20, 0.14);
/* Prism syntax tokens (Amber Terminal in Paper) */
--code-text: #2a2418;
--code-comment: #5f5846;
--code-keyword: #9a3420;
--code-string: #4b5e22;
--code-number: #9c3c1c;
--code-function: #2c5a80;
--code-class: #6a4a8a;
--code-operator: #483820;
--code-punctuation: #5c5240;
--code-tag: #9a3420;
--code-inserted: #4b5e22;
/* Mermaid semantic palette (Clear engineering drawing on warm paper) */
--mm-process-fill: #fdfaf0; --mm-process-stroke: #8c7853; --mm-process-text: #26211a;
--mm-success-fill: #e5f0e3; --mm-success-stroke: #2d663e; --mm-success-text: #17331f;
--mm-error-fill: #fae6e6; --mm-error-stroke: #9f2a2a; --mm-error-text: #451010;
--mm-warning-fill: #fdf2de; --mm-warning-stroke: #a16207; --mm-warning-text: #3d2402;
--mm-entry-fill: #faebd2; --mm-entry-stroke: #b45309; --mm-entry-text: #3d1c02;
--mm-aux-fill: #e2d7be; --mm-aux-stroke: #807156; --mm-aux-text: #26211a;
--mm-system-fill: #ebdcc2; --mm-system-stroke: #7c4a1e; --mm-system-text: #291807;
--mm-data-fill: #e1ede3; --mm-data-stroke: #33704c; --mm-data-text: #152e1f;
--mm-network-fill: #f6e2d8; --mm-network-stroke: #9e3e1b; --mm-network-text: #401708;
--mm-accent-fill: #fcecd2; --mm-accent-stroke: #b45309; --mm-accent-text: #3d1c02;
/* Legacy aliases for backward compatibility */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="paper"] .floating-theme-switcher .theme-icon-paper { display: block; }
/* Theme-switcher tooltip */
[data-theme="paper"] .floating-theme-switcher::after { content: "Paper"; }
/* ===== 5. THEME: SLATE =====
Холодный графит для длинного чтения: фон не чистый чёрный (нет ореола вокруг букв), основной текст
светло-серый, а не белый, контраст основного текста ≥ 7:1 (WCAG AAA). Глубину задают ступени светлоты,
а не тени. Акцент — приглушённый ледяной бирюзовый; ссылки — отдельный мягкий синий, чтобы их не путать
с активными элементами. Проверка контраста — engine/tests/test_themes.py. */
[data-theme="slate"] {
/* Background layers — холодный графит, от самого тёмного к приподнятым поверхностям */
--bg: #111418;
--bg-surface: #161a1f;
--bg-card: #1b2027;
--bg-card-hover: #232a33;
--bg-elevated: #2a323d;
/* Borders — холодные линии без свечения */
--border: #262d37;
--border-strong: #3a4452;
--border-accent: #56637a;
/* Text — светло-серый с холодным оттенком; ступени по убыванию важности */
--text: #d8dee8;
--text-secondary: #b4bdcb;
--text-muted: #9ba5b8;
--text-subtle: #8a95a9;
/* Accent — приглушённая ледяная бирюза (активные пункты, фокус, маркеры) */
--accent: #6cc4b8;
--accent-glow: rgba(108, 196, 184, 0.16);
--accent-hover: #84d6ca;
/* Link — мягкий небесно-синий, отдельно от акцента */
--link: #8fb6f0;
--link-glow: rgba(143, 182, 240, 0.14);
/* Semantic status — приглушённые, без кислотности */
--success: #6fc08f;
--success-glow: rgba(111, 192, 143, 0.15);
--warning: #e2b765;
--warning-glow: rgba(226, 183, 101, 0.15);
--danger: #e5867c;
--danger-glow: rgba(229, 134, 124, 0.15);
/* Code / special blocks — код чуть глубже статьи */
--code-bg: #0d1014;
--code-header-bg: #151a20;
--mermaid-bg: #0f1216;
--modal-bg: #161a1f;
--modal-backdrop: rgba(7, 9, 12, 0.85);
/* Overlays — холодные полупрозрачные слои поверх поверхностей */
--overlay-subtle: rgba(214, 222, 235, 0.025);
--overlay-hover: rgba(214, 222, 235, 0.045);
--stripe-odd: rgba(214, 222, 235, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(108, 196, 184, 0.07);
--active-submodule-border: rgba(108, 196, 184, 0.24);
--active-submodule-list-border: #6cc4b8;
--success-border: rgba(111, 192, 143, 0.35);
--danger-border: rgba(229, 134, 124, 0.35);
--accent-border: rgba(108, 196, 184, 0.38);
--accent-subtle-bg: rgba(108, 196, 184, 0.1);
--link-subtle-bg: rgba(143, 182, 240, 0.1);
--module-tag-border: rgba(108, 196, 184, 0.35);
--mermaid-tag-border: rgba(143, 182, 240, 0.35);
--wikilink-border: rgba(143, 182, 240, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(108, 196, 184, 0.2));
--hero-gradient: radial-gradient(circle at top, #1a2029 0%, var(--bg) 65%);
/* Shadows — мягкие и короткие: на тёмном фоне тень почти не видна, поэтому не перегружаем */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.55);
/* Prism syntax tokens — холодная палитра с сохранённой читаемостью на --code-bg */
--code-text: #d8dee8;
--code-comment: #7a859a;
--code-keyword: #85b5f2;
--code-string: #9fd39b;
--code-number: #e8a77b;
--code-function: #e3c98a;
--code-class: #8fd9cc;
--code-operator: #b9c3d1;
--code-punctuation: #8f9aad;
--code-tag: #e88e86;
--code-inserted: #7fcf9a;
/* Mermaid semantic palette — узлы в графитовых заливках, контуры в тех же оттенках, что и подсветка кода */
--mm-process-fill: #1b222b; --mm-process-stroke: #7aa6dc; --mm-process-text: #d8dee8;
--mm-success-fill: #16261f; --mm-success-stroke: #6fbf93; --mm-success-text: #d8dee8;
--mm-error-fill: #2a1a1d; --mm-error-stroke: #e0867c; --mm-error-text: #d8dee8;
--mm-warning-fill: #2a2415; --mm-warning-stroke: #e2b765; --mm-warning-text: #d8dee8;
--mm-entry-fill: #1d2433; --mm-entry-stroke: #8fb6f0; --mm-entry-text: #d8dee8;
--mm-aux-fill: #1a1d23; --mm-aux-stroke: #5d687c; --mm-aux-text: #b4bdcb;
--mm-system-fill: #1f2530; --mm-system-stroke: #9aa9c0; --mm-system-text: #d8dee8;
--mm-data-fill: #15252a; --mm-data-stroke: #5fbfb4; --mm-data-text: #d8dee8;
--mm-network-fill: #261c2a; --mm-network-stroke: #b78ad0; --mm-network-text: #d8dee8;
--mm-accent-fill: #1f2a33; --mm-accent-stroke: #8fdcd1; --mm-accent-text: #d8dee8;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="slate"] .floating-theme-switcher .theme-icon-slate { display: block; }
/* Theme-switcher tooltip */
[data-theme="slate"] .floating-theme-switcher::after { content: "Slate"; }
/* ===== 6. THEME: MIRAGE =====
Стиль Ayu Mirage: сине-серый сумрак, тёплый жёлтый акцент и оранжевые ключевые слова, голубые сущности.
Цвета — из официальной палитры Ayu (dempfi/ayu, ayu-mirage.sublime-color-scheme). Поверхности — ступени светлоты,
панель кода темнее статьи, как в Ayu. Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="mirage"] {
/* Background layers — базовый фон Ayu Mirage и поверхности выше него */
--bg: #242936;
--bg-surface: #282e3c;
--bg-card: #2c3343;
--bg-card-hover: #323a4e;
--bg-elevated: #3a4358;
/* Borders — приглушённые линии того же оттенка */
--border: #343b4d;
--border-strong: #4a5268;
--border-accent: #5c6680;
/* Text — основной цвет Ayu (#cccac2) и два более тусклых уровня */
--text: #cccac2;
--text-secondary: #bcbab2;
--text-muted: #a4abb8;
--text-subtle: #9ea7b5;
/* Accent — жёлтый Ayu (#ffcc66) для активных пунктов и фокуса */
--accent: #ffcc66;
--accent-glow: rgba(255, 204, 102, 0.16);
--accent-hover: #ffd580;
/* Link — голубой Ayu (#73d0ff) */
--link: #73d0ff;
--link-glow: rgba(115, 208, 255, 0.14);
/* Semantic status — цвета Ayu: зелёный для успеха, оранжевый для предупреждения, коралловый для ошибки */
--success: #bae67e;
--success-glow: rgba(186, 230, 126, 0.15);
--warning: #ffa659;
--warning-glow: rgba(255, 166, 89, 0.15);
--danger: #f28779;
--danger-glow: rgba(242, 135, 121, 0.15);
/* Code / special blocks — код темнее статьи, как панель Ayu */
--code-bg: #1f2430;
--code-header-bg: #232a38;
--mermaid-bg: #222836;
--modal-bg: #282e3c;
--modal-backdrop: rgba(20, 24, 32, 0.85);
/* Overlays — тёплые полупрозрачные слои поверх сине-серого фона */
--overlay-subtle: rgba(204, 202, 194, 0.025);
--overlay-hover: rgba(204, 202, 194, 0.045);
--stripe-odd: rgba(204, 202, 194, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(255, 204, 102, 0.07);
--active-submodule-border: rgba(255, 204, 102, 0.24);
--active-submodule-list-border: #ffcc66;
--success-border: rgba(186, 230, 126, 0.35);
--danger-border: rgba(242, 135, 121, 0.35);
--accent-border: rgba(255, 204, 102, 0.38);
--accent-subtle-bg: rgba(255, 204, 102, 0.1);
--link-subtle-bg: rgba(115, 208, 255, 0.1);
--module-tag-border: rgba(255, 204, 102, 0.35);
--mermaid-tag-border: rgba(115, 208, 255, 0.35);
--wikilink-border: rgba(115, 208, 255, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(255, 204, 102, 0.2));
--hero-gradient: radial-gradient(circle at top, #2b3244 0%, var(--bg) 65%);
/* Shadows — короткие и тёмные, как в Ayu */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-dropdown: 0 10px 28px rgba(12, 15, 22, 0.5);
/* Prism syntax tokens — палитра Ayu Mirage: ключевые слова #ffa659, строки #d5ff80, сущности #73d0ff */
--code-text: #cccac2;
--code-comment: #808ca0;
--code-keyword: #ffa659;
--code-string: #d5ff80;
--code-number: #ffcc66;
--code-function: #ffcd66;
--code-class: #73d0ff;
--code-operator: #f29e74;
--code-punctuation: #cccac2;
--code-tag: #5ccfe6;
--code-inserted: #bae67e;
/* Mermaid semantic palette — заливки оттенка сумрака, контуры — цвета Ayu */
--mm-process-fill: #2b3345; --mm-process-stroke: #73d0ff; --mm-process-text: #cccac2;
--mm-success-fill: #283532; --mm-success-stroke: #bae67e; --mm-success-text: #cccac2;
--mm-error-fill: #3a2b30; --mm-error-stroke: #f28779; --mm-error-text: #cccac2;
--mm-warning-fill: #3a3224; --mm-warning-stroke: #ffcc66; --mm-warning-text: #cccac2;
--mm-entry-fill: #2e2f42; --mm-entry-stroke: #dfbfff; --mm-entry-text: #cccac2;
--mm-aux-fill: #2a303e; --mm-aux-stroke: #6e7c8f; --mm-aux-text: #bcbab2;
--mm-system-fill: #323444; --mm-system-stroke: #ffa659; --mm-system-text: #cccac2;
--mm-data-fill: #263a3c; --mm-data-stroke: #95e6cb; --mm-data-text: #cccac2;
--mm-network-fill: #3a2c26; --mm-network-stroke: #f29e74; --mm-network-text: #cccac2;
--mm-accent-fill: #3a3424; --mm-accent-stroke: #ffcd66; --mm-accent-text: #cccac2;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="mirage"] .floating-theme-switcher .theme-icon-mirage { display: block; }
/* Theme-switcher tooltip */
[data-theme="mirage"] .floating-theme-switcher::after { content: "Mirage"; }
/* ===== 7. THEME: NIGHT =====
Мотив Tokyo Night (вариант night, folke/tokyonight.nvim): синий сумрак, голубые и фиолетовые акценты.
Палитра — из lua/tokyonight/colors/storm.lua и night.lua. Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="night"] {
/* Background layers */
--bg: #1a1b26;
--bg-surface: #1c1e2c;
--bg-card: #1f2335;
--bg-card-hover: #292e42;
--bg-elevated: #343a55;
/* Borders */
--border: #2a2f45;
--border-strong: #3b4261;
--border-accent: #545c7e;
/* Text — от основного к самому тусклому */
--text: #c0caf5;
--text-secondary: #a9b1d6;
--text-muted: #9aa3cc;
--text-subtle: #8c95c0;
/* Accent */
--accent: #7aa2f7;
--accent-glow: rgba(122, 162, 247, 0.16);
--accent-hover: #89ddff;
/* Link */
--link: #7dcfff;
--link-glow: rgba(125, 207, 255, 0.14);
/* Semantic status */
--success: #9ece6a;
--success-glow: rgba(158, 206, 106, 0.15);
--warning: #e0af68;
--warning-glow: rgba(224, 175, 104, 0.15);
--danger: #f7768e;
--danger-glow: rgba(247, 118, 142, 0.15);
/* Code / special blocks */
--code-bg: #16161e;
--code-header-bg: #1a1b26;
--mermaid-bg: #16161e;
--modal-bg: #1f2335;
--modal-backdrop: rgba(13, 14, 20, 0.85);
/* Overlays */
--overlay-subtle: rgba(214, 222, 245, 0.025);
--overlay-hover: rgba(214, 222, 245, 0.045);
--stripe-odd: rgba(214, 222, 245, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(122, 162, 247, 0.07);
--active-submodule-border: rgba(122, 162, 247, 0.24);
--active-submodule-list-border: #7aa2f7;
--success-border: rgba(158, 206, 106, 0.35);
--danger-border: rgba(247, 118, 142, 0.35);
--accent-border: rgba(122, 162, 247, 0.38);
--accent-subtle-bg: rgba(122, 162, 247, 0.1);
--link-subtle-bg: rgba(125, 207, 255, 0.1);
--module-tag-border: rgba(122, 162, 247, 0.35);
--mermaid-tag-border: rgba(125, 207, 255, 0.35);
--wikilink-border: rgba(125, 207, 255, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(122, 162, 247, 0.2));
--hero-gradient: radial-gradient(circle at top, #202538 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #c0caf5;
--code-comment: #7880ae;
--code-keyword: #bb9af7;
--code-string: #9ece6a;
--code-number: #ff9e64;
--code-function: #7aa2f7;
--code-class: #2ac3de;
--code-operator: #89ddff;
--code-punctuation: #a9b1d6;
--code-tag: #f7768e;
--code-inserted: #9ece6a;
/* Mermaid semantic palette */
--mm-process-fill: #1f2335; --mm-process-stroke: #7aa2f7; --mm-process-text: #c0caf5;
--mm-success-fill: #1c2a24; --mm-success-stroke: #9ece6a; --mm-success-text: #c0caf5;
--mm-error-fill: #2d1f2b; --mm-error-stroke: #f7768e; --mm-error-text: #c0caf5;
--mm-warning-fill: #2e2619; --mm-warning-stroke: #e0af68; --mm-warning-text: #c0caf5;
--mm-entry-fill: #24233a; --mm-entry-stroke: #bb9af7; --mm-entry-text: #c0caf5;
--mm-aux-fill: #1b1d2b; --mm-aux-stroke: #565f89; --mm-aux-text: #a9b1d6;
--mm-system-fill: #252a3d; --mm-system-stroke: #7dcfff; --mm-system-text: #c0caf5;
--mm-data-fill: #1a2b2e; --mm-data-stroke: #73daca; --mm-data-text: #c0caf5;
--mm-network-fill: #2a2233; --mm-network-stroke: #ff9e64; --mm-network-text: #c0caf5;
--mm-accent-fill: #232b3f; --mm-accent-stroke: #89ddff; --mm-accent-text: #c0caf5;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="night"] .floating-theme-switcher .theme-icon-night { display: block; }
/* Theme-switcher tooltip */
[data-theme="night"] .floating-theme-switcher::after { content: "Night"; }
/* ===== 8. THEME: GROOVE =====
Мотив Gruvbox (dark, morhetz/gruvbox): тёплый уголь, выцветшие «светлые» тона и яркие акценты.
Палитра — из colors/gruvbox.vim. Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="groove"] {
/* Background layers */
--bg: #282828;
--bg-surface: #2b2a29;
--bg-card: #32302f;
--bg-card-hover: #3c3836;
--bg-elevated: #504945;
/* Borders */
--border: #5a5045;
--border-strong: #7c6f64;
--border-accent: #928374;
/* Text — от основного к самому тусклому */
--text: #ebdbb2;
--text-secondary: #d5c4a1;
--text-muted: #bdae93;
--text-subtle: #b0a28d;
/* Accent */
--accent: #fabd2f;
--accent-glow: rgba(250, 189, 47, 0.16);
--accent-hover: #fe8019;
/* Link */
--link: #9bb8aa;
--link-glow: rgba(155, 184, 170, 0.14);
/* Semantic status */
--success: #b8bb26;
--success-glow: rgba(184, 187, 38, 0.15);
--warning: #fe8019;
--warning-glow: rgba(254, 128, 25, 0.15);
--danger: #ff7a6b;
--danger-glow: rgba(255, 122, 107, 0.15);
/* Code / special blocks */
--code-bg: #1d2021;
--code-header-bg: #282828;
--mermaid-bg: #1d2021;
--modal-bg: #32302f;
--modal-backdrop: rgba(29, 32, 33, 0.85);
/* Overlays */
--overlay-subtle: rgba(235, 219, 178, 0.025);
--overlay-hover: rgba(235, 219, 178, 0.045);
--stripe-odd: rgba(235, 219, 178, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(250, 189, 47, 0.07);
--active-submodule-border: rgba(250, 189, 47, 0.24);
--active-submodule-list-border: #fabd2f;
--success-border: rgba(184, 187, 38, 0.35);
--danger-border: rgba(255, 122, 107, 0.35);
--accent-border: rgba(250, 189, 47, 0.38);
--accent-subtle-bg: rgba(250, 189, 47, 0.1);
--link-subtle-bg: rgba(155, 184, 170, 0.1);
--module-tag-border: rgba(250, 189, 47, 0.35);
--mermaid-tag-border: rgba(155, 184, 170, 0.35);
--wikilink-border: rgba(155, 184, 170, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(250, 189, 47, 0.2));
--hero-gradient: radial-gradient(circle at top, #33302e 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.55);
/* Prism syntax tokens */
--code-text: #ebdbb2;
--code-comment: #9a8a7c;
--code-keyword: #fb4934;
--code-string: #b8bb26;
--code-number: #d3869b;
--code-function: #fabd2f;
--code-class: #8ec07c;
--code-operator: #fe8019;
--code-punctuation: #bdae93;
--code-tag: #83a598;
--code-inserted: #b8bb26;
/* Mermaid semantic palette */
--mm-process-fill: #32302f; --mm-process-stroke: #83a598; --mm-process-text: #ebdbb2;
--mm-success-fill: #2c3014; --mm-success-stroke: #b8bb26; --mm-success-text: #ebdbb2;
--mm-error-fill: #3c1f1a; --mm-error-stroke: #fb4934; --mm-error-text: #ebdbb2;
--mm-warning-fill: #3a2e12; --mm-warning-stroke: #fabd2f; --mm-warning-text: #ebdbb2;
--mm-entry-fill: #3b2a33; --mm-entry-stroke: #d3869b; --mm-entry-text: #ebdbb2;
--mm-aux-fill: #2c2a28; --mm-aux-stroke: #928374; --mm-aux-text: #bdae93;
--mm-system-fill: #3a2a1c; --mm-system-stroke: #fe8019; --mm-system-text: #ebdbb2;
--mm-data-fill: #223029; --mm-data-stroke: #8ec07c; --mm-data-text: #ebdbb2;
--mm-network-fill: #2b2c24; --mm-network-stroke: #83a598; --mm-network-text: #ebdbb2;
--mm-accent-fill: #3a3218; --mm-accent-stroke: #fabd2f; --mm-accent-text: #ebdbb2;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="groove"] .floating-theme-switcher .theme-icon-groove { display: block; }
/* Theme-switcher tooltip */
[data-theme="groove"] .floating-theme-switcher::after { content: "Groove"; }
/* ===== 4. THEME: AMBER (default — engineering workstation / amber terminal) ===== */
[data-theme="amber"] {
/* Background layers — deep charcoal / near black */
--bg: #11100e;
--bg-surface: #181613;
--bg-card: #201d19;
--bg-card-hover: #292520;
--bg-elevated: #28241f;
/* Borders — warm charcoal dividers */
--border: #302a23;
--border-strong: #4d4338;
--border-accent: #6b5e4e;
/* Text — warm light gray */
--text: #ded8cc;
--text-secondary: #b8b0a2;
--text-muted: #8a8275;
--text-subtle: #615a4f;
/* Accent — warm amber terminal (zero purple/indigo) */
--accent: #d89b32;
--accent-glow: rgba(216, 155, 50, 0.18);
--accent-hover: #c48824;
/* Link — warm burnt orange */
--link: #e06b2d;
--link-glow: rgba(224, 107, 45, 0.15);
/* Semantic status */
--success: #389e65;
--success-glow: rgba(56, 158, 101, 0.15);
--warning: #d89b32;
--warning-glow: rgba(216, 155, 50, 0.15);
--danger: #b83a2f;
--danger-glow: rgba(184, 58, 47, 0.15);
/* Code / special blocks */
--code-bg: #0d0c0a;
--code-header-bg: #171512;
--mermaid-bg: #0e0d0b;
--modal-bg: #181613;
--modal-backdrop: rgba(8, 7, 6, 0.88);
/* Overlays */
--overlay-subtle: rgba(240, 230, 215, 0.02);
--overlay-hover: rgba(240, 230, 215, 0.04);
--stripe-odd: rgba(240, 230, 215, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(216, 155, 50, 0.07);
--active-submodule-border: rgba(216, 155, 50, 0.22);
--active-submodule-list-border: #d89b32;
--success-border: rgba(56, 158, 101, 0.35);
--danger-border: rgba(184, 58, 47, 0.35);
--accent-border: rgba(216, 155, 50, 0.38);
--accent-subtle-bg: rgba(216, 155, 50, 0.1);
--link-subtle-bg: rgba(224, 107, 45, 0.1);
--module-tag-border: rgba(216, 155, 50, 0.35);
--mermaid-tag-border: rgba(224, 107, 45, 0.35);
--wikilink-border: rgba(224, 107, 45, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(216, 155, 50, 0.25));
--hero-gradient: radial-gradient(circle at top, #221e19 0%, var(--bg) 65%);
/* Shadows (deep & crisp) */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens (Warm Amber Terminal in Dark) */
--code-text: #ded8cc;
--code-comment: #736b5e;
--code-keyword: #e5a742;
--code-string: #e5c07b;
--code-number: #e06b2d;
--code-function: #f5bc64;
--code-class: #ea8c55;
--code-operator: #c7c0b3;
--code-punctuation: #8a8275;
--code-tag: #b83a2f;
--code-inserted: #389e65;
/* Mermaid semantic palette (Dark charcoal nodes with amber/orange accents) */
--mm-process-fill: #1c1915; --mm-process-stroke: #d89b32; --mm-process-text: #ded8cc;
--mm-success-fill: #142217; --mm-success-stroke: #389e65; --mm-success-text: #ded8cc;
--mm-error-fill: #2b1414; --mm-error-stroke: #b83a2f; --mm-error-text: #ded8cc;
--mm-warning-fill: #291d0e; --mm-warning-stroke: #e09f3e; --mm-warning-text: #ded8cc;
--mm-entry-fill: #241c14; --mm-entry-stroke: #e06b2d; --mm-entry-text: #ded8cc;
--mm-aux-fill: #1c1a17; --mm-aux-stroke: #615a4f; --mm-aux-text: #b8b0a2;
--mm-system-fill: #261e17; --mm-system-stroke: #c97334; --mm-system-text: #ded8cc;
--mm-data-fill: #16221c; --mm-data-stroke: #3da878; --mm-data-text: #ded8cc;
--mm-network-fill: #2a1715; --mm-network-stroke: #b83a2f; --mm-network-text: #ded8cc;
--mm-accent-fill: #281e10; --mm-accent-stroke: #f3b754; --mm-accent-text: #ded8cc;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="amber"] .floating-theme-switcher .theme-icon-amber { display: block; }
/* Theme-switcher tooltip */
[data-theme="amber"] .floating-theme-switcher::after { content: "Amber"; }
/* ===== 9. THEME: Vintage =====
Газетный лист 1800-х в Amber-окружении: только содержимое статьи и главной — выцветшая бумага и шрифты XIX века.
Шапка, сайдбар и фон страницы — палитра Amber. Шрифты (OFL) лежат в themes/vintage/ и копируются только при включении. */
[data-theme="vintage"] {
/* Background layers — deep charcoal / near black */
--bg: #11100e;
--bg-surface: #181613;
--bg-card: #201d19;
--bg-card-hover: #292520;
--bg-elevated: #28241f;
/* Borders — warm charcoal dividers */
--border: #302a23;
--border-strong: #4d4338;
--border-accent: #6b5e4e;
/* Text — warm light gray */
--text: #ded8cc;
--text-secondary: #b8b0a2;
--text-muted: #8a8275;
--text-subtle: #615a4f;
/* Accent — warm amber terminal (zero purple/indigo) */
--accent: #d89b32;
--accent-glow: rgba(216, 155, 50, 0.18);
--accent-hover: #c48824;
/* Link — warm burnt orange */
--link: #e06b2d;
--link-glow: rgba(224, 107, 45, 0.15);
/* Semantic status */
--success: #389e65;
--success-glow: rgba(56, 158, 101, 0.15);
--warning: #d89b32;
--warning-glow: rgba(216, 155, 50, 0.15);
--danger: #b83a2f;
--danger-glow: rgba(184, 58, 47, 0.15);
/* Code / special blocks */
--code-bg: #0d0c0a;
--code-header-bg: #171512;
--mermaid-bg: #0e0d0b;
--modal-bg: #181613;
--modal-backdrop: rgba(8, 7, 6, 0.88);
/* Overlays */
--overlay-subtle: rgba(240, 230, 215, 0.02);
--overlay-hover: rgba(240, 230, 215, 0.04);
--stripe-odd: rgba(240, 230, 215, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(216, 155, 50, 0.07);
--active-submodule-border: rgba(216, 155, 50, 0.22);
--active-submodule-list-border: #d89b32;
--success-border: rgba(56, 158, 101, 0.35);
--danger-border: rgba(184, 58, 47, 0.35);
--accent-border: rgba(216, 155, 50, 0.38);
--accent-subtle-bg: rgba(216, 155, 50, 0.1);
--link-subtle-bg: rgba(224, 107, 45, 0.1);
--module-tag-border: rgba(216, 155, 50, 0.35);
--mermaid-tag-border: rgba(224, 107, 45, 0.35);
--wikilink-border: rgba(224, 107, 45, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(216, 155, 50, 0.25));
--hero-gradient: radial-gradient(circle at top, #221e19 0%, var(--bg) 65%);
/* Shadows (deep & crisp) */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens (Warm Amber Terminal in Dark) */
--code-text: #ded8cc;
--code-comment: #736b5e;
--code-keyword: #e5a742;
--code-string: #e5c07b;
--code-number: #e06b2d;
--code-function: #f5bc64;
--code-class: #ea8c55;
--code-operator: #c7c0b3;
--code-punctuation: #8a8275;
--code-tag: #b83a2f;
--code-inserted: #389e65;
/* Mermaid semantic palette (Dark charcoal nodes with amber/orange accents) */
--mm-process-fill: #1c1915; --mm-process-stroke: #d89b32; --mm-process-text: #ded8cc;
--mm-success-fill: #142217; --mm-success-stroke: #389e65; --mm-success-text: #ded8cc;
--mm-error-fill: #2b1414; --mm-error-stroke: #b83a2f; --mm-error-text: #ded8cc;
--mm-warning-fill: #291d0e; --mm-warning-stroke: #e09f3e; --mm-warning-text: #ded8cc;
--mm-entry-fill: #241c14; --mm-entry-stroke: #e06b2d; --mm-entry-text: #ded8cc;
--mm-aux-fill: #1c1a17; --mm-aux-stroke: #615a4f; --mm-aux-text: #b8b0a2;
--mm-system-fill: #261e17; --mm-system-stroke: #c97334; --mm-system-text: #ded8cc;
--mm-data-fill: #16221c; --mm-data-stroke: #3da878; --mm-data-text: #ded8cc;
--mm-network-fill: #2a1715; --mm-network-stroke: #b83a2f; --mm-network-text: #ded8cc;
--mm-accent-fill: #281e10; --mm-accent-stroke: #f3b754; --mm-accent-text: #ded8cc;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
[data-theme="vintage"] .article-body,
[data-theme="vintage"] .index-container {
/* Background layers */
--bg: #e3c7a5;
--bg-surface: #e8d0b1;
--bg-card: #eed9be;
--bg-card-hover: #f2e1ca;
--bg-elevated: #f6eadb;
/* Borders */
--border: #a07a4c;
--border-strong: #6b4a28;
--border-accent: #4f3c2a;
/* Text — от основного к самому тусклому */
--text: #1c130c;
--text-secondary: #33261b;
--text-muted: #46362a;
--text-subtle: #574535;
/* Accent */
--accent: #7a2217;
--accent-glow: rgba(122, 34, 23, 0.16);
--accent-hover: #5a180f;
/* Link */
--link: #5b2a0f;
--link-glow: rgba(91, 42, 15, 0.14);
/* Semantic status */
--success: #34501f;
--success-glow: rgba(52, 80, 31, 0.15);
--warning: #734709;
--warning-glow: rgba(115, 71, 9, 0.15);
--danger: #8a1e1e;
--danger-glow: rgba(138, 30, 30, 0.15);
/* Code / special blocks */
--code-bg: #cfb08c;
--code-header-bg: #c7a682;
--mermaid-bg: #e8d3b5;
--modal-bg: #eedcc3;
--modal-backdrop: rgba(28, 19, 12, 0.55);
/* Overlays */
--overlay-subtle: rgba(28, 19, 12, 0.025);
--overlay-hover: rgba(28, 19, 12, 0.045);
--stripe-odd: rgba(28, 19, 12, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(122, 34, 23, 0.07);
--active-submodule-border: rgba(122, 34, 23, 0.24);
--active-submodule-list-border: #7a2217;
--success-border: rgba(52, 80, 31, 0.35);
--danger-border: rgba(138, 30, 30, 0.35);
--accent-border: rgba(122, 34, 23, 0.38);
--accent-subtle-bg: rgba(122, 34, 23, 0.1);
--link-subtle-bg: rgba(91, 42, 15, 0.1);
--module-tag-border: rgba(122, 34, 23, 0.35);
--mermaid-tag-border: rgba(91, 42, 15, 0.35);
--wikilink-border: rgba(91, 42, 15, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(122, 34, 23, 0.2));
--hero-gradient: radial-gradient(circle at top, #e6cdab 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 0 rgba(28, 19, 12, 0.14);
--shadow-dropdown: 0 8px 20px rgba(28, 19, 12, 0.2);
/* Prism syntax tokens */
--code-text: #1c130c;
--code-comment: #4d3a28;
--code-keyword: #6b1c12;
--code-string: #2a4217;
--code-number: #552a05;
--code-function: #173357;
--code-class: #4a2c5e;
--code-operator: #4a3616;
--code-punctuation: #33261b;
--code-tag: #6b1f14;
--code-inserted: #2a4217;
/* Mermaid semantic palette */
--mm-process-fill: #eedcc3; --mm-process-stroke: #5b3a1e; --mm-process-text: #1c130c;
--mm-success-fill: #e0e2c6; --mm-success-stroke: #34501f; --mm-success-text: #1c130c;
--mm-error-fill: #efd5c8; --mm-error-stroke: #8a1e1e; --mm-error-text: #1c130c;
--mm-warning-fill: #f0dcb0; --mm-warning-stroke: #734709; --mm-warning-text: #1c130c;
--mm-entry-fill: #ead7cd; --mm-entry-stroke: #7a2217; --mm-entry-text: #1c130c;
--mm-aux-fill: #e3cdae; --mm-aux-stroke: #7d6247; --mm-aux-text: #46362a;
--mm-system-fill: #e8d8bf; --mm-system-stroke: #4f3c2a; --mm-system-text: #1c130c;
--mm-data-fill: #dbe0c9; --mm-data-stroke: #3d5a2a; --mm-data-text: #1c130c;
--mm-network-fill: #ebd5c4; --mm-network-stroke: #6b1f14; --mm-network-text: #1c130c;
--mm-accent-fill: #f1e2c3; --mm-accent-stroke: #173357; --mm-accent-text: #1c130c;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
/* Шрифты, углы и текст листа: вне листа остаются Amber */
--font-sans: "Vintage Bitter", Georgia, "Times New Roman", serif;
--font-mono: "Vintage Typewriter", "Vintage PT Mono", "Courier New", monospace;
--font-display: "Vintage Bitter", Georgia, serif;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
padding-top: 20px;
padding-bottom: 20px;
}
/* Theme-switcher icon visibility */
[data-theme="vintage"] .floating-theme-switcher .theme-icon-vintage { display: block; }
/* Theme-switcher tooltip */
[data-theme="vintage"] .floating-theme-switcher::after { content: "Vintage"; }
/* ===== Шрифты: файлы в themes/vintage/fonts/ (OFL, см. OFL-*.txt); копирует сборка только для этой темы.
Все гарнитуры с кириллицей. Текст — Bitter: слэб с низким контрастом штрихов, плотный и читаемый, как на референсе.
Courier Prime — печатная латиница, кириллица в коде падает на PT Mono ===== */
@font-face { font-family: "Vintage Bitter"; src: url("themes/vintage/fonts/Bitter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vintage Bitter"; src: url("themes/vintage/fonts/Bitter-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Vintage Typewriter"; src: url("themes/vintage/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vintage Typewriter"; src: url("themes/vintage/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vintage PT Mono"; src: url("themes/vintage/fonts/PTMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* ===== Бумага листа: текстура только внутри .article-body и главной, вокруг — Amber ===== */
[data-theme="vintage"] .article-body,
[data-theme="vintage"] .index-container {
background-color: var(--bg);
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at center, rgba(70, 45, 20, 0) 60%, rgba(70, 45, 20, 0.12) 100%);;
}
/* ===== Типографика газеты ===== */
:root[data-theme="vintage"] .article-title,
:root[data-theme="vintage"] .hero-title {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.1;
letter-spacing: 0;
}
:root[data-theme="vintage"] .article-markdown h2,
:root[data-theme="vintage"] .article-markdown h3,
:root[data-theme="vintage"] .article-markdown h4,
:root[data-theme="vintage"] .section-title,
:root[data-theme="vintage"] .module-card-title {
font-family: var(--font-display);
font-weight: 700;
}
:root[data-theme="vintage"] .article-markdown p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
[data-theme="vintage"] .article-body button,
[data-theme="vintage"] .index-container button,
[data-theme="vintage"] .btn-card-start {
font-family: var(--font-display);
}
:root[data-theme="vintage"] .article-markdown a:not(.wikilink) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Инлайн-код: Courier Prime есть только в 400 и 700, поэтому 600 даёт полужирное — здесь оставляем обычное начертание */
[data-theme="vintage"] .article-markdown :not(pre) > code {
font-weight: 400;
}
/* ===== Телефон: без шумовой бумаги и переносов. feTurbulence считается на каждом тайле в device-пикселях
(на DPR 2.6 около 16 Мпикс на лист) и тормозит прокрутку; сплошной --bg и вид бумаги почти сохраняют ===== */
@media (max-width: 768px) {
[data-theme="vintage"] .article-body,
[data-theme="vintage"] .index-container {
background-image: radial-gradient(ellipse at center, rgba(70, 45, 20, 0) 60%, rgba(70, 45, 20, 0.12) 100%);
}
:root[data-theme="vintage"] .article-markdown p {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
}
}
/* ===== 11. THEME: Retro Manual =====
Vintage с машинописным шрифтом Courier Prime (как на титуле UNIX Programmer's Manual 1971 года) и синим корешком
слева от листа. Ассеты (шрифты) — из папки themes/vintage (assets_from), повторно не копируются. */
[data-theme="retro-manual"] {
/* Background layers — deep charcoal / near black */
--bg: #11100e;
--bg-surface: #181613;
--bg-card: #201d19;
--bg-card-hover: #292520;
--bg-elevated: #28241f;
/* Borders — warm charcoal dividers */
--border: #302a23;
--border-strong: #4d4338;
--border-accent: #6b5e4e;
/* Text — warm light gray */
--text: #ded8cc;
--text-secondary: #b8b0a2;
--text-muted: #8a8275;
--text-subtle: #615a4f;
/* Accent — warm amber terminal (zero purple/indigo) */
--accent: #d89b32;
--accent-glow: rgba(216, 155, 50, 0.18);
--accent-hover: #c48824;
/* Link — warm burnt orange */
--link: #e06b2d;
--link-glow: rgba(224, 107, 45, 0.15);
/* Semantic status */
--success: #389e65;
--success-glow: rgba(56, 158, 101, 0.15);
--warning: #d89b32;
--warning-glow: rgba(216, 155, 50, 0.15);
--danger: #b83a2f;
--danger-glow: rgba(184, 58, 47, 0.15);
/* Code / special blocks */
--code-bg: #0d0c0a;
--code-header-bg: #171512;
--mermaid-bg: #0e0d0b;
--modal-bg: #181613;
--modal-backdrop: rgba(8, 7, 6, 0.88);
/* Overlays */
--overlay-subtle: rgba(240, 230, 215, 0.02);
--overlay-hover: rgba(240, 230, 215, 0.04);
--stripe-odd: rgba(240, 230, 215, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(216, 155, 50, 0.07);
--active-submodule-border: rgba(216, 155, 50, 0.22);
--active-submodule-list-border: #d89b32;
--success-border: rgba(56, 158, 101, 0.35);
--danger-border: rgba(184, 58, 47, 0.35);
--accent-border: rgba(216, 155, 50, 0.38);
--accent-subtle-bg: rgba(216, 155, 50, 0.1);
--link-subtle-bg: rgba(224, 107, 45, 0.1);
--module-tag-border: rgba(216, 155, 50, 0.35);
--mermaid-tag-border: rgba(224, 107, 45, 0.35);
--wikilink-border: rgba(224, 107, 45, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(216, 155, 50, 0.25));
--hero-gradient: radial-gradient(circle at top, #221e19 0%, var(--bg) 65%);
/* Shadows (deep & crisp) */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens (Warm Amber Terminal in Dark) */
--code-text: #ded8cc;
--code-comment: #736b5e;
--code-keyword: #e5a742;
--code-string: #e5c07b;
--code-number: #e06b2d;
--code-function: #f5bc64;
--code-class: #ea8c55;
--code-operator: #c7c0b3;
--code-punctuation: #8a8275;
--code-tag: #b83a2f;
--code-inserted: #389e65;
/* Mermaid semantic palette (Dark charcoal nodes with amber/orange accents) */
--mm-process-fill: #1c1915; --mm-process-stroke: #d89b32; --mm-process-text: #ded8cc;
--mm-success-fill: #142217; --mm-success-stroke: #389e65; --mm-success-text: #ded8cc;
--mm-error-fill: #2b1414; --mm-error-stroke: #b83a2f; --mm-error-text: #ded8cc;
--mm-warning-fill: #291d0e; --mm-warning-stroke: #e09f3e; --mm-warning-text: #ded8cc;
--mm-entry-fill: #241c14; --mm-entry-stroke: #e06b2d; --mm-entry-text: #ded8cc;
--mm-aux-fill: #1c1a17; --mm-aux-stroke: #615a4f; --mm-aux-text: #b8b0a2;
--mm-system-fill: #261e17; --mm-system-stroke: #c97334; --mm-system-text: #ded8cc;
--mm-data-fill: #16221c; --mm-data-stroke: #3da878; --mm-data-text: #ded8cc;
--mm-network-fill: #2a1715; --mm-network-stroke: #b83a2f; --mm-network-text: #ded8cc;
--mm-accent-fill: #281e10; --mm-accent-stroke: #f3b754; --mm-accent-text: #ded8cc;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
[data-theme="retro-manual"] .article-body,
[data-theme="retro-manual"] .index-container {
/* Background layers */
--bg: #e3c7a5;
--bg-surface: #e8d0b1;
--bg-card: #eed9be;
--bg-card-hover: #f2e1ca;
--bg-elevated: #f6eadb;
/* Borders */
--border: #a07a4c;
--border-strong: #6b4a28;
--border-accent: #4f3c2a;
/* Text — от основного к самому тусклому */
--text: #1c130c;
--text-secondary: #33261b;
--text-muted: #46362a;
--text-subtle: #574535;
/* Accent */
--accent: #7a2217;
--accent-glow: rgba(122, 34, 23, 0.16);
--accent-hover: #5a180f;
/* Link */
--link: #5b2a0f;
--link-glow: rgba(91, 42, 15, 0.14);
/* Semantic status */
--success: #34501f;
--success-glow: rgba(52, 80, 31, 0.15);
--warning: #734709;
--warning-glow: rgba(115, 71, 9, 0.15);
--danger: #8a1e1e;
--danger-glow: rgba(138, 30, 30, 0.15);
/* Code / special blocks */
--code-bg: #cfb08c;
--code-header-bg: #c7a682;
--mermaid-bg: #e8d3b5;
--modal-bg: #eedcc3;
--modal-backdrop: rgba(28, 19, 12, 0.55);
/* Overlays */
--overlay-subtle: rgba(28, 19, 12, 0.025);
--overlay-hover: rgba(28, 19, 12, 0.045);
--stripe-odd: rgba(28, 19, 12, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(122, 34, 23, 0.07);
--active-submodule-border: rgba(122, 34, 23, 0.24);
--active-submodule-list-border: #7a2217;
--success-border: rgba(52, 80, 31, 0.35);
--danger-border: rgba(138, 30, 30, 0.35);
--accent-border: rgba(122, 34, 23, 0.38);
--accent-subtle-bg: rgba(122, 34, 23, 0.1);
--link-subtle-bg: rgba(91, 42, 15, 0.1);
--module-tag-border: rgba(122, 34, 23, 0.35);
--mermaid-tag-border: rgba(91, 42, 15, 0.35);
--wikilink-border: rgba(91, 42, 15, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(122, 34, 23, 0.2));
--hero-gradient: radial-gradient(circle at top, #e6cdab 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 0 rgba(28, 19, 12, 0.14);
--shadow-dropdown: 0 8px 20px rgba(28, 19, 12, 0.2);
/* Prism syntax tokens */
--code-text: #1c130c;
--code-comment: #4d3a28;
--code-keyword: #6b1c12;
--code-string: #2a4217;
--code-number: #552a05;
--code-function: #173357;
--code-class: #4a2c5e;
--code-operator: #4a3616;
--code-punctuation: #33261b;
--code-tag: #6b1f14;
--code-inserted: #2a4217;
/* Mermaid semantic palette */
--mm-process-fill: #eedcc3; --mm-process-stroke: #5b3a1e; --mm-process-text: #1c130c;
--mm-success-fill: #e0e2c6; --mm-success-stroke: #34501f; --mm-success-text: #1c130c;
--mm-error-fill: #efd5c8; --mm-error-stroke: #8a1e1e; --mm-error-text: #1c130c;
--mm-warning-fill: #f0dcb0; --mm-warning-stroke: #734709; --mm-warning-text: #1c130c;
--mm-entry-fill: #ead7cd; --mm-entry-stroke: #7a2217; --mm-entry-text: #1c130c;
--mm-aux-fill: #e3cdae; --mm-aux-stroke: #7d6247; --mm-aux-text: #46362a;
--mm-system-fill: #e8d8bf; --mm-system-stroke: #4f3c2a; --mm-system-text: #1c130c;
--mm-data-fill: #dbe0c9; --mm-data-stroke: #3d5a2a; --mm-data-text: #1c130c;
--mm-network-fill: #ebd5c4; --mm-network-stroke: #6b1f14; --mm-network-text: #1c130c;
--mm-accent-fill: #f1e2c3; --mm-accent-stroke: #173357; --mm-accent-text: #1c130c;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
/* Шрифты, углы и текст листа: вне листа остаются Amber */
--font-sans: "Retro Typewriter", "Retro PT Mono", "Courier New", monospace;
--font-mono: "Retro Typewriter", "Retro PT Mono", "Courier New", monospace;
--font-display: "Retro Typewriter", "Retro PT Mono", "Courier New", monospace;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
padding-top: 20px;
padding-bottom: 20px;
--spine: #1e3d6b;
}
/* Theme-switcher icon visibility */
[data-theme="retro-manual"] .floating-theme-switcher .theme-icon-retro-manual { display: block; }
/* Theme-switcher tooltip */
[data-theme="retro-manual"] .floating-theme-switcher::after { content: "Retro Manual"; }
/* ===== Шрифты: файлы в themes/vintage/fonts/ (OFL, см. OFL-*.txt); папка — через assets_from.
Все гарнитуры с кириллицей. Courier Prime — печатная латиница, кириллица в коде падает на PT Mono ===== */
@font-face { font-family: "Retro Typewriter"; src: url("themes/vintage/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Retro Typewriter"; src: url("themes/vintage/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Retro PT Mono"; src: url("themes/vintage/fonts/PTMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* ===== Бумага листа: текстура только внутри .article-body и главной, вокруг — Amber ===== */
[data-theme="retro-manual"] .article-body,
[data-theme="retro-manual"] .index-container {
background-color: var(--bg);
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at center, rgba(70, 45, 20, 0) 60%, rgba(70, 45, 20, 0.12) 100%);;
}
/* ===== Типографика газеты ===== */
:root[data-theme="retro-manual"] .article-title,
:root[data-theme="retro-manual"] .hero-title {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.1;
letter-spacing: 0;
}
:root[data-theme="retro-manual"] .article-markdown h2,
:root[data-theme="retro-manual"] .article-markdown h3,
:root[data-theme="retro-manual"] .article-markdown h4,
:root[data-theme="retro-manual"] .section-title,
:root[data-theme="retro-manual"] .module-card-title {
font-family: var(--font-display);
font-weight: 700;
}
:root[data-theme="retro-manual"] .article-markdown p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
[data-theme="retro-manual"] .article-body button,
[data-theme="retro-manual"] .index-container button,
[data-theme="retro-manual"] .btn-card-start {
font-family: var(--font-display);
}
:root[data-theme="retro-manual"] .article-markdown a:not(.wikilink) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Инлайн-код: Courier Prime есть только в 400 и 700, поэтому 600 даёт полужирное — здесь оставляем обычное начертание */
[data-theme="retro-manual"] .article-markdown :not(pre) > code {
font-weight: 400;
}
/* ===== Корешок слева от листа: вместо рамки — синяя спираль с просветами, как на обложке.
Зубцы — --spine, просветы — --bg листа (псевдоэлемент наследует переменные .article-body). ===== */
[data-theme="retro-manual"] .article-body,
[data-theme="retro-manual"] .index-container {
position: relative;
border-left: none;
}
[data-theme="retro-manual"] .article-body::before,
[data-theme="retro-manual"] .index-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -16px;
width: 16px;
border-radius: 3px;
background: repeating-linear-gradient(to bottom, var(--spine) 0 26px, var(--bg) 26px 36px);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
/* Телефон: слева у листа мало места — корешок уже, зубцы мельче, всё равно видим */
@media (max-width: 768px) {
[data-theme="retro-manual"] .article-body::before {
width: 10px;
left: -10px;
box-shadow: none;
background: repeating-linear-gradient(to bottom, var(--spine) 0 18px, var(--bg) 18px 26px);
}
/* Главная на телефоне занимает всю ширину экрана: корешок встаёт у левого края внутри отступа */
[data-theme="retro-manual"] .index-container::before {
width: 10px;
left: 0;
box-shadow: none;
background: repeating-linear-gradient(to bottom, var(--spine) 0 18px, var(--bg) 18px 26px);
}
}
/* Маркеры списков висят слева от текста: отступ внутри листа, чтобы они не уходили под корешок */
[data-theme="retro-manual"] .article-markdown ul,
[data-theme="retro-manual"] .article-markdown ol {
padding-left: 2em;
}
/* ===== Телефон: без шумовой бумаги и переносов. feTurbulence считается на каждом тайле в device-пикселях
(на DPR 2.6 около 16 Мпикс на лист) и тормозит прокрутку; сплошной --bg и вид бумаги почти сохраняют ===== */
@media (max-width: 768px) {
[data-theme="retro-manual"] .article-body,
[data-theme="retro-manual"] .index-container {
background-image: radial-gradient(ellipse at center, rgba(70, 45, 20, 0) 60%, rgba(70, 45, 20, 0.12) 100%);
}
:root[data-theme="retro-manual"] .article-markdown p {
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
}
}
/* ===== 10. THEME: Modern Manual =====
Лист Paper с геометрическим гротеском Jost (как на обложке UNIX Programmer's Manual) и синим корешком слева
от статьи. Вокруг листа — тёмная палитра Amber, как в Retro Manual. Шрифт — OFL, файлы в themes/modern-manual/fonts/. */
[data-theme="modern-manual"] {
/* Background layers — deep charcoal / near black */
--bg: #11100e;
--bg-surface: #181613;
--bg-card: #201d19;
--bg-card-hover: #292520;
--bg-elevated: #28241f;
/* Borders — warm charcoal dividers */
--border: #302a23;
--border-strong: #4d4338;
--border-accent: #6b5e4e;
/* Text — warm light gray */
--text: #ded8cc;
--text-secondary: #b8b0a2;
--text-muted: #8a8275;
--text-subtle: #615a4f;
/* Accent — warm amber terminal (zero purple/indigo) */
--accent: #d89b32;
--accent-glow: rgba(216, 155, 50, 0.18);
--accent-hover: #c48824;
/* Link — warm burnt orange */
--link: #e06b2d;
--link-glow: rgba(224, 107, 45, 0.15);
/* Semantic status */
--success: #389e65;
--success-glow: rgba(56, 158, 101, 0.15);
--warning: #d89b32;
--warning-glow: rgba(216, 155, 50, 0.15);
--danger: #b83a2f;
--danger-glow: rgba(184, 58, 47, 0.15);
/* Code / special blocks */
--code-bg: #0d0c0a;
--code-header-bg: #171512;
--mermaid-bg: #0e0d0b;
--modal-bg: #181613;
--modal-backdrop: rgba(8, 7, 6, 0.88);
/* Overlays */
--overlay-subtle: rgba(240, 230, 215, 0.02);
--overlay-hover: rgba(240, 230, 215, 0.04);
--stripe-odd: rgba(240, 230, 215, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(216, 155, 50, 0.07);
--active-submodule-border: rgba(216, 155, 50, 0.22);
--active-submodule-list-border: #d89b32;
--success-border: rgba(56, 158, 101, 0.35);
--danger-border: rgba(184, 58, 47, 0.35);
--accent-border: rgba(216, 155, 50, 0.38);
--accent-subtle-bg: rgba(216, 155, 50, 0.1);
--link-subtle-bg: rgba(224, 107, 45, 0.1);
--module-tag-border: rgba(216, 155, 50, 0.35);
--mermaid-tag-border: rgba(224, 107, 45, 0.35);
--wikilink-border: rgba(224, 107, 45, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(216, 155, 50, 0.25));
--hero-gradient: radial-gradient(circle at top, #221e19 0%, var(--bg) 65%);
/* Shadows (deep & crisp) */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens (Warm Amber Terminal in Dark) */
--code-text: #ded8cc;
--code-comment: #736b5e;
--code-keyword: #e5a742;
--code-string: #e5c07b;
--code-number: #e06b2d;
--code-function: #f5bc64;
--code-class: #ea8c55;
--code-operator: #c7c0b3;
--code-punctuation: #8a8275;
--code-tag: #b83a2f;
--code-inserted: #389e65;
/* Mermaid semantic palette (Dark charcoal nodes with amber/orange accents) */
--mm-process-fill: #1c1915; --mm-process-stroke: #d89b32; --mm-process-text: #ded8cc;
--mm-success-fill: #142217; --mm-success-stroke: #389e65; --mm-success-text: #ded8cc;
--mm-error-fill: #2b1414; --mm-error-stroke: #b83a2f; --mm-error-text: #ded8cc;
--mm-warning-fill: #291d0e; --mm-warning-stroke: #e09f3e; --mm-warning-text: #ded8cc;
--mm-entry-fill: #241c14; --mm-entry-stroke: #e06b2d; --mm-entry-text: #ded8cc;
--mm-aux-fill: #1c1a17; --mm-aux-stroke: #615a4f; --mm-aux-text: #b8b0a2;
--mm-system-fill: #261e17; --mm-system-stroke: #c97334; --mm-system-text: #ded8cc;
--mm-data-fill: #16221c; --mm-data-stroke: #3da878; --mm-data-text: #ded8cc;
--mm-network-fill: #2a1715; --mm-network-stroke: #b83a2f; --mm-network-text: #ded8cc;
--mm-accent-fill: #281e10; --mm-accent-stroke: #f3b754; --mm-accent-text: #ded8cc;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
[data-theme="modern-manual"] .article-body,
[data-theme="modern-manual"] .index-container {
/* Background layers — warm aged paper / ivory parchment */
--bg: #f0ecdc;
--bg-surface: #f2eedf;
--bg-card: #f6f2e4;
--bg-card-hover: #fbf9f1;
--bg-elevated: #fffdf7;
/* Borders — warm bookbinding & page dividers */
--border: #b9ae90;
--border-strong: #8f8260;
--border-accent: #5e5238;
/* Text — warm charcoal / brown-black */
--text: #2a2418;
--text-secondary: #3d3626;
--text-muted: #5c5240;
--text-subtle: #6e6450;
/* Accent — warm burnt orange / rich amber (zero blue/purple) */
--accent: #b04028;
--accent-glow: rgba(180, 83, 9, 0.16);
--accent-hover: #8f3220;
/* Link — deep warm rust / mahogany brown */
--link: #386898;
--link-glow: rgba(140, 59, 18, 0.14);
/* Semantic status */
--success: #2d663e;
--success-glow: rgba(45, 102, 62, 0.15);
--warning: #7a4c0e;
--warning-glow: rgba(122, 76, 14, 0.15);
--danger: #9f2a2a;
--danger-glow: rgba(159, 42, 42, 0.15);
/* Code — amber terminal aesthetic */
--code-bg: #e4dcc4;
--code-header-bg: #d9d0b5;
--mermaid-bg: #f3efe0;
--modal-bg: #f6f2e4;
--modal-backdrop: rgba(38, 33, 26, 0.78);
/* Overlays */
--overlay-subtle: rgba(40, 32, 20, 0.035);
--overlay-hover: rgba(40, 32, 20, 0.06);
--stripe-odd: rgba(40, 32, 20, 0.025);
/* Component-specific */
--active-submodule-bg: rgba(180, 83, 9, 0.08);
--active-submodule-border: rgba(180, 83, 9, 0.28);
--active-submodule-list-border: #b45309;
--success-border: rgba(45, 102, 62, 0.35);
--danger-border: rgba(159, 42, 42, 0.35);
--accent-border: rgba(180, 83, 9, 0.38);
--accent-subtle-bg: rgba(180, 83, 9, 0.08);
--link-subtle-bg: rgba(140, 59, 18, 0.08);
--module-tag-border: rgba(180, 83, 9, 0.35);
--mermaid-tag-border: rgba(140, 59, 18, 0.35);
--wikilink-border: rgba(140, 59, 18, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(180, 83, 9, 0.25));
--hero-gradient: radial-gradient(circle at top, #e4d7bd 0%, var(--bg) 65%);
/* Shadows (warm & crisp) */
--shadow-card: 0 1px 3px rgba(40, 32, 20, 0.08);
--shadow-dropdown: 0 4px 16px rgba(40, 32, 20, 0.14);
/* Prism syntax tokens (Amber Terminal in Paper) */
--code-text: #2a2418;
--code-comment: #5f5846;
--code-keyword: #9a3420;
--code-string: #4b5e22;
--code-number: #9c3c1c;
--code-function: #2c5a80;
--code-class: #6a4a8a;
--code-operator: #483820;
--code-punctuation: #5c5240;
--code-tag: #9a3420;
--code-inserted: #4b5e22;
/* Mermaid semantic palette (Clear engineering drawing on warm paper) */
--mm-process-fill: #fdfaf0; --mm-process-stroke: #8c7853; --mm-process-text: #26211a;
--mm-success-fill: #e5f0e3; --mm-success-stroke: #2d663e; --mm-success-text: #17331f;
--mm-error-fill: #fae6e6; --mm-error-stroke: #9f2a2a; --mm-error-text: #451010;
--mm-warning-fill: #fdf2de; --mm-warning-stroke: #a16207; --mm-warning-text: #3d2402;
--mm-entry-fill: #faebd2; --mm-entry-stroke: #b45309; --mm-entry-text: #3d1c02;
--mm-aux-fill: #e2d7be; --mm-aux-stroke: #807156; --mm-aux-text: #26211a;
--mm-system-fill: #ebdcc2; --mm-system-stroke: #7c4a1e; --mm-system-text: #291807;
--mm-data-fill: #e1ede3; --mm-data-stroke: #33704c; --mm-data-text: #152e1f;
--mm-network-fill: #f6e2d8; --mm-network-stroke: #9e3e1b; --mm-network-text: #401708;
--mm-accent-fill: #fcecd2; --mm-accent-stroke: #b45309; --mm-accent-text: #3d1c02;
/* Legacy aliases for backward compatibility */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
/* Цвет корешка — синяя пластиковая спираль, как на обложке */
--spine: #1e3d6b;
/* Текст листа — Jost; отступы сверху и снизу как у листа Retro */
--font-sans: "Modern Jost", -apple-system, "Segoe UI", Roboto, sans-serif;
background-color: var(--bg);
color: var(--text-secondary);
font-family: var(--font-sans);
padding-top: 20px;
padding-bottom: 20px;
}
/* Theme-switcher icon visibility */
[data-theme="modern-manual"] .floating-theme-switcher .theme-icon-modern-manual { display: block; }
/* Theme-switcher tooltip */
[data-theme="modern-manual"] .floating-theme-switcher::after { content: "Modern Manual"; }
/* ===== Шрифт: Jost (геометрический гротеск, кириллица, переменный вес) ===== */
@font-face { font-family: "Modern Jost"; src: url("themes/modern-manual/fonts/Jost-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ===== Корешок слева от листа: вместо рамки — синяя спираль с просветами, как на обложке.
Зубцы — --spine, просветы — --bg листа (псевдоэлемент наследует переменные .article-body). ===== */
[data-theme="modern-manual"] .article-body,
[data-theme="modern-manual"] .index-container {
position: relative;
border-left: none;
}
[data-theme="modern-manual"] .article-body::before,
[data-theme="modern-manual"] .index-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -16px;
width: 16px;
border-radius: 3px;
background: repeating-linear-gradient(to bottom, var(--spine) 0 26px, var(--bg) 26px 36px);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
/* Телефон: слева у листа мало места — корешок уже, зубцы мельче, всё равно видим */
@media (max-width: 768px) {
[data-theme="modern-manual"] .article-body::before {
width: 10px;
left: -10px;
background: repeating-linear-gradient(to bottom, var(--spine) 0 18px, var(--bg) 18px 26px);
}
/* Главная на телефоне занимает всю ширину экрана: корешок встаёт у левого края внутри отступа */
[data-theme="modern-manual"] .index-container::before {
width: 10px;
left: 0;
background: repeating-linear-gradient(to bottom, var(--spine) 0 18px, var(--bg) 18px 26px);
}
}
/* Маркеры списков висят слева от текста: отступ внутри листа, чтобы они не уходили под корешок */
[data-theme="modern-manual"] .article-markdown ul,
[data-theme="modern-manual"] .article-markdown ol {
padding-left: 2em;
}
/* ===== 11. THEME: SYNTHWAVE =====
Синтвейв 80-х: тёмно-фиолетовая ночь, неоновая маджента и голубой, закатный жёлтый.
Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="synthwave"] {
/* Background layers */
--bg: #1a1030;
--bg-surface: #1e1337;
--bg-card: #241845;
--bg-card-hover: #2e2058;
--bg-elevated: #3a2a6c;
/* Borders */
--border: #2f2358;
--border-strong: #45348a;
--border-accent: #6b55b8;
/* Text — от основного к самому тусклому */
--text: #f3eaff;
--text-secondary: #d8c9f7;
--text-muted: #bfaee9;
--text-subtle: #ad9be0;
/* Accent */
--accent: #ff5fd2;
--accent-glow: rgba(255, 95, 210, 0.16);
--accent-hover: #ff8be3;
/* Link */
--link: #3ff4f0;
--link-glow: rgba(63, 244, 240, 0.14);
/* Semantic status */
--success: #72f1b8;
--success-glow: rgba(114, 241, 184, 0.15);
--warning: #fede5d;
--warning-glow: rgba(254, 222, 93, 0.15);
--danger: #ff6b8b;
--danger-glow: rgba(255, 107, 139, 0.15);
/* Code / special blocks */
--code-bg: #140b26;
--code-header-bg: #1a1030;
--mermaid-bg: #140b26;
--modal-bg: #241845;
--modal-backdrop: rgba(10, 5, 22, 0.88);
/* Overlays */
--overlay-subtle: rgba(240, 230, 255, 0.025);
--overlay-hover: rgba(240, 230, 255, 0.045);
--stripe-odd: rgba(240, 230, 255, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(255, 95, 210, 0.07);
--active-submodule-border: rgba(255, 95, 210, 0.24);
--active-submodule-list-border: #ff5fd2;
--success-border: rgba(114, 241, 184, 0.35);
--danger-border: rgba(255, 107, 139, 0.35);
--accent-border: rgba(255, 95, 210, 0.38);
--accent-subtle-bg: rgba(255, 95, 210, 0.1);
--link-subtle-bg: rgba(63, 244, 240, 0.1);
--module-tag-border: rgba(255, 95, 210, 0.35);
--mermaid-tag-border: rgba(63, 244, 240, 0.35);
--wikilink-border: rgba(63, 244, 240, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(255, 95, 210, 0.2));
--hero-gradient: radial-gradient(circle at top, #2a1650 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #f3eaff;
--code-comment: #9f8fd0;
--code-keyword: #ff5fd2;
--code-string: #72f1b8;
--code-number: #fede5d;
--code-function: #3ff4f0;
--code-class: #ff9e64;
--code-operator: #ff8be3;
--code-punctuation: #d8c9f7;
--code-tag: #ff6b8b;
--code-inserted: #72f1b8;
/* Mermaid semantic palette */
--mm-process-fill: #1f304b; --mm-process-stroke: #3ff4f0; --mm-process-text: #f3eaff;
--mm-success-fill: #263043; --mm-success-stroke: #72f1b8; --mm-success-text: #f3eaff;
--mm-error-fill: #3a1d3d; --mm-error-stroke: #ff6b8b; --mm-error-text: #f3eaff;
--mm-warning-fill: #3a2d36; --mm-warning-stroke: #fede5d; --mm-warning-text: #f3eaff;
--mm-entry-fill: #3a1b47; --mm-entry-stroke: #ff5fd2; --mm-entry-text: #f3eaff;
--mm-aux-fill: #2a1f45; --mm-aux-stroke: #8c7bc8; --mm-aux-text: #d8c9f7;
--mm-system-fill: #2c214d; --mm-system-stroke: #9d8cff; --mm-system-text: #f3eaff;
--mm-data-fill: #242e44; --mm-data-stroke: #5ee6c0; --mm-data-text: #f3eaff;
--mm-network-fill: #3a2437; --mm-network-stroke: #ff9e64; --mm-network-text: #f3eaff;
--mm-accent-fill: #3a2149; --mm-accent-stroke: #ff8be3; --mm-accent-text: #f3eaff;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Неоновое свечение заголовка статьи */
[data-theme="synthwave"] .article-markdown h1 { text-shadow: 0 0 18px rgba(255, 95, 210, 0.585); }
/* Лёгкое свечение кода: блоки и инлайн; токены Prism светятся своим цветом */
[data-theme="synthwave"] .article-markdown pre code,
[data-theme="synthwave"] .code-block pre code,
[data-theme="synthwave"] .article-markdown :not(pre) > code {
text-shadow: 0 0 8px color-mix(in srgb, currentColor 58%, transparent);
}
/* Theme-switcher icon visibility */
[data-theme="synthwave"] .floating-theme-switcher .theme-icon-synthwave { display: block; }
/* Theme-switcher tooltip */
[data-theme="synthwave"] .floating-theme-switcher::after { content: "Synthwave"; }
/* ===== 12. THEME: CYBERPUNK =====
Киберпанк: чёрный асфальт, кислотно-жёлтый акцент, неоновые циан и маджента, как в интерфейсах Night City.
Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="cyberpunk"] {
/* Background layers */
--bg: #0b0b10;
--bg-surface: #101018;
--bg-card: #15151f;
--bg-card-hover: #1e1e2c;
--bg-elevated: #2a2a3c;
/* Borders */
--border: #23232f;
--border-strong: #36364a;
--border-accent: #5a5a78;
/* Text — от основного к самому тусклому */
--text: #f2f2e8;
--text-secondary: #d6d6c8;
--text-muted: #b2b2a8;
--text-subtle: #9d9d94;
/* Accent */
--accent: #fcee0a;
--accent-glow: rgba(252, 238, 10, 0.16);
--accent-hover: #fff56b;
/* Link */
--link: #00f0ff;
--link-glow: rgba(0, 240, 255, 0.14);
/* Semantic status */
--success: #39ff88;
--success-glow: rgba(57, 255, 136, 0.15);
--warning: #ff9f1c;
--warning-glow: rgba(255, 159, 28, 0.15);
--danger: #ff3b6b;
--danger-glow: rgba(255, 59, 107, 0.15);
/* Code / special blocks */
--code-bg: #07070b;
--code-header-bg: #0b0b10;
--mermaid-bg: #07070b;
--modal-bg: #15151f;
--modal-backdrop: rgba(3, 3, 6, 0.9);
/* Overlays */
--overlay-subtle: rgba(242, 242, 232, 0.025);
--overlay-hover: rgba(242, 242, 232, 0.045);
--stripe-odd: rgba(242, 242, 232, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(252, 238, 10, 0.07);
--active-submodule-border: rgba(252, 238, 10, 0.24);
--active-submodule-list-border: #fcee0a;
--success-border: rgba(57, 255, 136, 0.35);
--danger-border: rgba(255, 59, 107, 0.35);
--accent-border: rgba(252, 238, 10, 0.38);
--accent-subtle-bg: rgba(252, 238, 10, 0.1);
--link-subtle-bg: rgba(0, 240, 255, 0.1);
--module-tag-border: rgba(252, 238, 10, 0.35);
--mermaid-tag-border: rgba(0, 240, 255, 0.35);
--wikilink-border: rgba(0, 240, 255, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(252, 238, 10, 0.2));
--hero-gradient: radial-gradient(circle at top, #1a1a14 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #f2f2e8;
--code-comment: #8f8fa0;
--code-keyword: #ff3b6b;
--code-string: #39ff88;
--code-number: #fcee0a;
--code-function: #00f0ff;
--code-class: #ff9f1c;
--code-operator: #fff56b;
--code-punctuation: #d6d6c8;
--code-tag: #ff3b6b;
--code-inserted: #39ff88;
/* Mermaid semantic palette */
--mm-process-fill: #092b31; --mm-process-stroke: #00f0ff; --mm-process-text: #f2f2e8;
--mm-success-fill: #112d21; --mm-success-stroke: #39ff88; --mm-success-text: #f2f2e8;
--mm-error-fill: #2d121d; --mm-error-stroke: #ff3b6b; --mm-error-text: #f2f2e8;
--mm-warning-fill: #2d2b0f; --mm-warning-stroke: #fcee0a; --mm-warning-text: #f2f2e8;
--mm-entry-fill: #281831; --mm-entry-stroke: #d86bff; --mm-entry-text: #f2f2e8;
--mm-aux-fill: #1d1d24; --mm-aux-stroke: #8a8a9e; --mm-aux-text: #d6d6c8;
--mm-system-fill: #09252b; --mm-system-stroke: #00c4d4; --mm-system-text: #f2f2e8;
--mm-data-fill: #112d21; --mm-data-stroke: #39ff88; --mm-data-text: #f2f2e8;
--mm-network-fill: #2d2012; --mm-network-stroke: #ff9f1c; --mm-network-text: #f2f2e8;
--mm-accent-fill: #2d2b0f; --mm-accent-stroke: #fcee0a; --mm-accent-text: #f2f2e8;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Неоновое свечение заголовка статьи */
[data-theme="cyberpunk"] .article-markdown h1 { text-shadow: 0 0 18px rgba(252, 238, 10, 0.585); }
/* Лёгкое свечение кода: блоки и инлайн; токены Prism светятся своим цветом */
[data-theme="cyberpunk"] .article-markdown pre code,
[data-theme="cyberpunk"] .code-block pre code,
[data-theme="cyberpunk"] .article-markdown :not(pre) > code {
text-shadow: 0 0 8px color-mix(in srgb, currentColor 58%, transparent);
}
/* Theme-switcher icon visibility */
[data-theme="cyberpunk"] .floating-theme-switcher .theme-icon-cyberpunk { display: block; }
/* Theme-switcher tooltip */
[data-theme="cyberpunk"] .floating-theme-switcher::after { content: "Cyberpunk"; }
/* ===== 13. THEME: RETRO-GREEN =====
Ретро-электроника и ретро-компьютеры: зелёный фосфор монитора на чёрном стекле, как у терминалов 1970–80-х.
Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="retro-green"] {
/* Background layers */
--bg: #07110a;
--bg-surface: #0a160d;
--bg-card: #0e1c12;
--bg-card-hover: #15291b;
--bg-elevated: #1e3a27;
/* Borders */
--border: #17301f;
--border-strong: #265238;
--border-accent: #3a7a52;
/* Text — от основного к самому тусклому */
--text: #b8ffc8;
--text-secondary: #93eba9;
--text-muted: #7ed296;
--text-subtle: #6dbf86;
/* Accent */
--accent: #33ff77;
--accent-glow: rgba(51, 255, 119, 0.16);
--accent-hover: #7dffa5;
/* Link */
--link: #5de8d0;
--link-glow: rgba(93, 232, 208, 0.14);
/* Semantic status */
--success: #8cff5c;
--success-glow: rgba(140, 255, 92, 0.15);
--warning: #ffd24a;
--warning-glow: rgba(255, 210, 74, 0.15);
--danger: #ff6b5e;
--danger-glow: rgba(255, 107, 94, 0.15);
/* Code / special blocks */
--code-bg: #040a06;
--code-header-bg: #07110a;
--mermaid-bg: #040a06;
--modal-bg: #0e1c12;
--modal-backdrop: rgba(2, 6, 3, 0.9);
/* Overlays */
--overlay-subtle: rgba(184, 255, 200, 0.025);
--overlay-hover: rgba(184, 255, 200, 0.045);
--stripe-odd: rgba(184, 255, 200, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(51, 255, 119, 0.07);
--active-submodule-border: rgba(51, 255, 119, 0.24);
--active-submodule-list-border: #33ff77;
--success-border: rgba(140, 255, 92, 0.35);
--danger-border: rgba(255, 107, 94, 0.35);
--accent-border: rgba(51, 255, 119, 0.38);
--accent-subtle-bg: rgba(51, 255, 119, 0.1);
--link-subtle-bg: rgba(93, 232, 208, 0.1);
--module-tag-border: rgba(51, 255, 119, 0.35);
--mermaid-tag-border: rgba(93, 232, 208, 0.35);
--wikilink-border: rgba(93, 232, 208, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(51, 255, 119, 0.2));
--hero-gradient: radial-gradient(circle at top, #10261a 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #b8ffc8;
--code-comment: #6aa87c;
--code-keyword: #33ff77;
--code-string: #ffd24a;
--code-number: #5de8d0;
--code-function: #7dffa5;
--code-class: #8cff5c;
--code-operator: #93eba9;
--code-punctuation: #93eba9;
--code-tag: #ff6b5e;
--code-inserted: #8cff5c;
/* Mermaid semantic palette */
--mm-process-fill: #0d3219; --mm-process-stroke: #33ff77; --mm-process-text: #b8ffc8;
--mm-success-fill: #1a3215; --mm-success-stroke: #8cff5c; --mm-success-text: #b8ffc8;
--mm-error-fill: #2a1e16; --mm-error-stroke: #ff6b5e; --mm-error-text: #b8ffc8;
--mm-warning-fill: #2a2c13; --mm-warning-stroke: #ffd24a; --mm-warning-text: #b8ffc8;
--mm-entry-fill: #132f26; --mm-entry-stroke: #5de8d0; --mm-entry-text: #b8ffc8;
--mm-aux-fill: #132419; --mm-aux-stroke: #5f9a72; --mm-aux-text: #93eba9;
--mm-system-fill: #183220; --mm-system-stroke: #7dffa5; --mm-system-text: #b8ffc8;
--mm-data-fill: #132f26; --mm-data-stroke: #5de8d0; --mm-data-text: #b8ffc8;
--mm-network-fill: #2a2c13; --mm-network-stroke: #ffd24a; --mm-network-text: #b8ffc8;
--mm-accent-fill: #183220; --mm-accent-stroke: #7dffa5; --mm-accent-text: #b8ffc8;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Неоновое свечение заголовка статьи */
[data-theme="retro-green"] .article-markdown h1 { text-shadow: 0 0 18px rgba(51, 255, 119, 0.585); }
/* Theme-switcher icon visibility */
[data-theme="retro-green"] .floating-theme-switcher .theme-icon-retro-green { display: block; }
/* Theme-switcher tooltip */
[data-theme="retro-green"] .floating-theme-switcher::after { content: "Retro Green"; }
/* ===== 14. THEME: RETRO-AMBER =====
Ретро-компьютеры: янтарный фосфор монитора на тёмно-коричневом стекле, как у терминалов 1980-х (клон Retro Green).
Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="retro-amber"] {
/* Background layers */
--bg: #130d05;
--bg-surface: #181008;
--bg-card: #1e150a;
--bg-card-hover: #2b1f10;
--bg-elevated: #3c2c16;
/* Borders */
--border: #33250f;
--border-strong: #4d3919;
--border-accent: #8a6428;
/* Text — от основного к самому тусклому */
--text: #ffdfa6;
--text-secondary: #f0c985;
--text-muted: #d9b270;
--text-subtle: #c29d5f;
/* Accent */
--accent: #ffb000;
--accent-glow: rgba(255, 176, 0, 0.16);
--accent-hover: #ffcf5c;
/* Link */
--link: #ffc86b;
--link-glow: rgba(255, 200, 107, 0.14);
/* Semantic status */
--success: #b8e04a;
--success-glow: rgba(184, 224, 74, 0.15);
--warning: #ffd24a;
--warning-glow: rgba(255, 210, 74, 0.15);
--danger: #ff7a55;
--danger-glow: rgba(255, 122, 85, 0.15);
/* Code / special blocks */
--code-bg: #0b0703;
--code-header-bg: #130d05;
--mermaid-bg: #0b0703;
--modal-bg: #1e150a;
--modal-backdrop: rgba(8, 5, 2, 0.9);
/* Overlays */
--overlay-subtle: rgba(255, 223, 166, 0.025);
--overlay-hover: rgba(255, 223, 166, 0.045);
--stripe-odd: rgba(255, 223, 166, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(255, 176, 0, 0.07);
--active-submodule-border: rgba(255, 176, 0, 0.24);
--active-submodule-list-border: #ffb000;
--success-border: rgba(184, 224, 74, 0.35);
--danger-border: rgba(255, 122, 85, 0.35);
--accent-border: rgba(255, 176, 0, 0.38);
--accent-subtle-bg: rgba(255, 176, 0, 0.1);
--link-subtle-bg: rgba(255, 200, 107, 0.1);
--module-tag-border: rgba(255, 176, 0, 0.35);
--mermaid-tag-border: rgba(255, 200, 107, 0.35);
--wikilink-border: rgba(255, 200, 107, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(255, 176, 0, 0.2));
--hero-gradient: radial-gradient(circle at top, #2a1c0a 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #ffdfa6;
--code-comment: #a88a56;
--code-keyword: #ffb000;
--code-string: #ffe08a;
--code-number: #ff9a3c;
--code-function: #ffcf5c;
--code-class: #b8e04a;
--code-operator: #f0c985;
--code-punctuation: #f0c985;
--code-tag: #ff7a55;
--code-inserted: #b8e04a;
/* Mermaid semantic palette */
--mm-process-fill: #342404; --mm-process-stroke: #ffb000; --mm-process-text: #ffdfa6;
--mm-success-fill: #2a2b0f; --mm-success-stroke: #b8e04a; --mm-success-text: #ffdfa6;
--mm-error-fill: #341c10; --mm-error-stroke: #ff7a55; --mm-error-text: #ffdfa6;
--mm-warning-fill: #34290f; --mm-warning-stroke: #ffd24a; --mm-warning-text: #ffdfa6;
--mm-entry-fill: #342811; --mm-entry-stroke: #ffcf5c; --mm-entry-text: #ffdfa6;
--mm-aux-fill: #261d10; --mm-aux-stroke: #9a7f50; --mm-aux-text: #f0c985;
--mm-system-fill: #342713; --mm-system-stroke: #ffc86b; --mm-system-text: #ffdfa6;
--mm-data-fill: #2f2414; --mm-data-stroke: #d9b270; --mm-data-text: #ffdfa6;
--mm-network-fill: #34210d; --mm-network-stroke: #ff9a3c; --mm-network-text: #ffdfa6;
--mm-accent-fill: #342811; --mm-accent-stroke: #ffcf5c; --mm-accent-text: #ffdfa6;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Неоновое свечение заголовка статьи */
[data-theme="retro-amber"] .article-markdown h1 { text-shadow: 0 0 18px rgba(255, 176, 0, 0.585); }
/* Theme-switcher icon visibility */
[data-theme="retro-amber"] .floating-theme-switcher .theme-icon-retro-amber { display: block; }
/* Theme-switcher tooltip */
[data-theme="retro-amber"] .floating-theme-switcher::after { content: "Retro Amber"; }
/* ===== 15. THEME: RETRO-GAMING =====
Ретро-гейминг и консоли 8/16 бит: тёмный экран приставки, красный как кнопки геймпада, голубой, зелёный и жёлтый пиксельных игр.
Контраст проверяется в engine/tests/test_themes.py. */
[data-theme="retro-gaming"] {
/* Background layers */
--bg: #12121c;
--bg-surface: #161622;
--bg-card: #1b1b2a;
--bg-card-hover: #25253a;
--bg-elevated: #32324c;
/* Borders */
--border: #26263a;
--border-strong: #3a3a58;
--border-accent: #5c5c8a;
/* Text — от основного к самому тусклому */
--text: #f4f4fa;
--text-secondary: #d9d9e8;
--text-muted: #b6b6cc;
--text-subtle: #a0a0ba;
/* Accent */
--accent: #ff5a4d;
--accent-glow: rgba(255, 90, 77, 0.16);
--accent-hover: #ff8579;
/* Link */
--link: #4cc2ff;
--link-glow: rgba(76, 194, 255, 0.14);
/* Semantic status */
--success: #5cdc5c;
--success-glow: rgba(92, 220, 92, 0.15);
--warning: #ffd23f;
--warning-glow: rgba(255, 210, 63, 0.15);
--danger: #ff7aa8;
--danger-glow: rgba(255, 122, 168, 0.15);
/* Code / special blocks */
--code-bg: #0c0c14;
--code-header-bg: #12121c;
--mermaid-bg: #0c0c14;
--modal-bg: #1b1b2a;
--modal-backdrop: rgba(6, 6, 12, 0.88);
/* Overlays */
--overlay-subtle: rgba(244, 244, 250, 0.025);
--overlay-hover: rgba(244, 244, 250, 0.045);
--stripe-odd: rgba(244, 244, 250, 0.015);
/* Component-specific */
--active-submodule-bg: rgba(255, 90, 77, 0.07);
--active-submodule-border: rgba(255, 90, 77, 0.24);
--active-submodule-list-border: #ff5a4d;
--success-border: rgba(92, 220, 92, 0.35);
--danger-border: rgba(255, 122, 168, 0.35);
--accent-border: rgba(255, 90, 77, 0.38);
--accent-subtle-bg: rgba(255, 90, 77, 0.1);
--link-subtle-bg: rgba(76, 194, 255, 0.1);
--module-tag-border: rgba(255, 90, 77, 0.35);
--mermaid-tag-border: rgba(76, 194, 255, 0.35);
--wikilink-border: rgba(76, 194, 255, 0.45);
--nav-active-gradient: linear-gradient(90deg, var(--accent), rgba(255, 90, 77, 0.2));
--hero-gradient: radial-gradient(circle at top, #1e1e34 0%, var(--bg) 65%);
/* Shadows */
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.6);
/* Prism syntax tokens */
--code-text: #f4f4fa;
--code-comment: #8f8fae;
--code-keyword: #ff5a4d;
--code-string: #5cdc5c;
--code-number: #ffd23f;
--code-function: #4cc2ff;
--code-class: #ffa24d;
--code-operator: #ff8579;
--code-punctuation: #d9d9e8;
--code-tag: #ff7aa8;
--code-inserted: #5cdc5c;
/* Mermaid semantic palette */
--mm-process-fill: #1a2b3c; --mm-process-stroke: #4cc2ff; --mm-process-text: #f4f4fa;
--mm-success-fill: #1c2e25; --mm-success-stroke: #5cdc5c; --mm-success-text: #f4f4fa;
--mm-error-fill: #332130; --mm-error-stroke: #ff7aa8; --mm-error-text: #f4f4fa;
--mm-warning-fill: #332d21; --mm-warning-stroke: #ffd23f; --mm-warning-text: #f4f4fa;
--mm-entry-fill: #331c23; --mm-entry-stroke: #ff5a4d; --mm-entry-text: #f4f4fa;
--mm-aux-fill: #21212e; --mm-aux-stroke: #8080a0; --mm-aux-text: #d9d9e8;
--mm-system-fill: #24263c; --mm-system-stroke: #8fa0ff; --mm-system-text: #f4f4fa;
--mm-data-fill: #1c2e31; --mm-data-stroke: #5cdcb0; --mm-data-text: #f4f4fa;
--mm-network-fill: #332623; --mm-network-stroke: #ffa24d; --mm-network-text: #f4f4fa;
--mm-accent-fill: #332229; --mm-accent-stroke: #ff8579; --mm-accent-text: #f4f4fa;
/* Legacy aliases */
--bg-canvas: var(--bg);
--border-subtle: var(--border);
--border-active: var(--border-strong);
--border-highlight: var(--border-accent);
--text-primary: var(--text);
--text-dim: var(--text-subtle);
--accent-indigo: var(--accent);
--accent-indigo-glow: var(--accent-glow);
--accent-cyan: var(--link);
--accent-cyan-glow: var(--link-glow);
--accent-emerald: var(--success);
--accent-emerald-glow: var(--success-glow);
--accent-amber: var(--warning);
--accent-amber-glow: var(--warning-glow);
--accent-rose: var(--danger);
--accent-rose-glow: var(--danger-glow);
}
/* Theme-switcher icon visibility */
[data-theme="retro-gaming"] .floating-theme-switcher .theme-icon-retro-gaming { display: block; }
/* Theme-switcher tooltip */
[data-theme="retro-gaming"] .floating-theme-switcher::after { content: "Retro Gaming"; }
/* ==========================================================================
Go Backend Encyclopedia — Design System
Three-theme architecture: amber (default) | paper | light
Theme switching via [data-theme] attribute on
All colours live in theme blocks; rule bodies use semantic tokens only.
========================================================================== */
/* ===== 0. Шрифты ядра: путь от assets/ (свёрнутый style.css лежит в dist/assets/) ===== */
@font-face { font-family: "Engine Mono"; src: url("fonts/EngineMono-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
/* ===== 1. LAYOUT & TYPOGRAPHY TOKENS (not themed) ===== */
:root {
/* Размеры и лейаут */
--sidebar-width: 30vw; /* ширина сайдбара: ровно 30% окна на десктопе; на телефоне (≤768px) — 80% */
--header-height: 56px;
--max-content-width: 1040px;
/* Текст статьи по умолчанию занимает всю максимальную ширину контента (сравнивается с ней); меньше — переопределить здесь */
--prose-max-width: var(--max-content-width);
/* Оглавление «На этой странице»: блок не шире этой доли ширины окна (единственное место, где задаётся число) */
--toc-max-width: 30vw;
/* Затемнение экрана за выдвижной панелью на телефоне (сайдбар): видно, что панель поверх статьи */
--panel-scrim: rgba(0, 0, 0, 0.45);
/* Шрифты */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Engine Mono — вшитый Cascadia Code (fonts/, OFL), латиница и кириллица, вариативный вес 200–700; запасные — системные */
--font-mono: "Engine Mono", "Cascadia Code", Consolas, "Courier New", monospace;
--code-inline-weight: 500;
/* Радиусы (строгие инженерные) */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
/* ===== PRISM SYNTAX HIGHLIGHTING (theme-aware) ===== */
/* Base code element — override vendor background/color */
code[class*="language-"],
pre[class*="language-"] {
color: var(--code-text);
background: none;
}
/* Note: .code-block pre already has background: var(--code-bg) */
/* But we need to also cover pre[class*=language-] background */
pre[class*="language-"] {
background: var(--code-bg) !important;
color: var(--code-text) !important;
}
:not(pre) > code[class*="language-"] {
background: var(--code-inline-bg, var(--bg-card)) !important;
color: var(--code-inline, color-mix(in oklab, var(--link) 65%, var(--text))) !important;
}
/* Token colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.block-comment {
color: var(--code-comment);
}
.token.punctuation {
color: var(--code-punctuation);
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: var(--code-tag);
}
.token.function-name {
color: var(--code-function);
}
.token.boolean,
.token.number,
.token.function {
color: var(--code-number);
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: var(--code-class);
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: var(--code-keyword);
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: var(--code-string);
}
.token.operator,
.token.entity,
.token.url {
color: var(--code-operator);
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: var(--code-inserted);
}
/* ===== MERMAID DIAGRAM THEME OVERRIDES ===== */
/* Override classDef semantic palette for all 3 themes */
/* Mermaid injects