/* Три темы чтения для материалов Тома.
   Подключается ПОСЛЕ собственных стилей уроков и перекрывает их цвета
   селекторами html[data-theme=...], не трогая размеры, отступы и текст. */

:root {
  --bg: #101014;
  --fg: #dcdce2;
  --muted: #9a9aa4;
  --dim: #74747e;
  --surface: #17171c;
  --surface2: #1c1c22;
  --border: #2b2b33;
  --border-soft: #24242b;
  --accent: #b07df0;
  --accent-fg: #c9a6f7;
  --strong: #f2f2f5;
  --code-bg: #24242b;
  --code-fg: #e9b3f5;
  --shadow: rgba(0, 0, 0, .4);
}

/* Тёплая бумага: низкий контраст, мягкий свет, для долгого чтения днём */
html[data-theme="paper"] {
  --bg: #f5efe3;
  --fg: #3a352d;
  --muted: #6f675b;
  --dim: #8d8477;
  --surface: #efe7d8;
  --surface2: #e8dfcd;
  --border: #d8cdb8;
  --border-soft: #e2d8c5;
  --accent: #8a5a2b;
  --accent-fg: #7a4f24;
  --strong: #241f18;
  --code-bg: #e6dcc7;
  --code-fg: #7a4f24;
  --shadow: rgba(90, 70, 40, .14);
  color-scheme: light;
}

/* Дневной свет: нейтральный светлый, максимальная чёткость шрифта */
html[data-theme="daylight"] {
  --bg: #fcfcfd;
  --fg: #2c2c33;
  --muted: #62626d;
  --dim: #85858f;
  --surface: #f4f4f6;
  --surface2: #ececf0;
  --border: #d9d9e0;
  --border-soft: #e6e6eb;
  --accent: #6d28d9;
  --accent-fg: #5b21b6;
  --strong: #17171c;
  --code-bg: #efeff3;
  --code-fg: #7e22ce;
  --shadow: rgba(20, 20, 40, .10);
  color-scheme: light;
}

/* ---- общая раскраска: работает и на моих страницах, и на уроках Тома ---- */

html[data-theme] body { background: var(--bg); color: var(--fg); }

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4 { color: var(--strong); }

html[data-theme] .kicker,
html[data-theme] .mod-n,
html[data-theme] .l-num { color: var(--accent-fg); }

html[data-theme] .sub,
html[data-theme] .gist,
html[data-theme] .deck,
html[data-theme] figcaption,
html[data-theme] .note { color: var(--muted); }

html[data-theme] .src,
html[data-theme] .foot,
html[data-theme] .l-parts,
html[data-theme] .st span,
html[data-theme] .deck p + p { color: var(--dim); }

html[data-theme] a { color: var(--accent-fg); border-bottom-color: transparent; }
html[data-theme] a:hover { border-bottom-color: var(--accent-fg); }
html[data-theme] strong,
html[data-theme] .st b,
html[data-theme] .callout h1,
html[data-theme] .callout h2,
html[data-theme] .callout h3,
html[data-theme] .callout h4,
html[data-theme] .note b { color: var(--strong); }

html[data-theme] code { background: var(--code-bg); color: var(--code-fg); }
html[data-theme] pre { background: var(--surface); border-color: var(--border); }
html[data-theme] pre code { background: none; color: var(--fg); }

html[data-theme] .note,
html[data-theme] .toc,
html[data-theme] .st,
html[data-theme] .fs,
html[data-theme] ol.lessons a,
html[data-theme] blockquote { background: var(--surface); border-color: var(--border); }
html[data-theme] .toc ol { color: var(--fg); }

html[data-theme] blockquote { border-left-color: var(--accent); color: var(--fg); }
html[data-theme] ol.lessons a:hover { border-color: var(--accent); background: var(--surface2); }

html[data-theme] .mod,
html[data-theme] .sec,
html[data-theme] .foot,
html[data-theme] .sources { border-top-color: var(--border); }

html[data-theme] th, html[data-theme] td { border-color: var(--border); }
html[data-theme] th { background: var(--surface2); color: var(--strong); }

html[data-theme] .sources { color: var(--muted); }
html[data-theme] .sources strong { color: var(--fg); }
html[data-theme] .sources a { color: var(--accent-fg); }
html[data-theme] .sources code { background: var(--code-bg); color: var(--code-fg); }

html[data-theme] .fs i {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-fg);
}

html[data-theme] figure img { border-color: var(--border); box-shadow: 0 6px 24px var(--shadow); }

/* «Хромированные» врезки Тома: в светлых темах металл читается плохо */
html[data-theme="paper"] .chrome,
html[data-theme="daylight"] .chrome {
  background: linear-gradient(150deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
}
html[data-theme="paper"] .ch-in,
html[data-theme="daylight"] .ch-in { background: var(--surface); }
html[data-theme="paper"] .ch-in p,
html[data-theme="daylight"] .ch-in p { color: var(--strong); }
html[data-theme="paper"] .ch-lab,
html[data-theme="daylight"] .ch-lab { background: var(--accent); color: #fff; }
html[data-theme="paper"] .ch-in::after,
html[data-theme="daylight"] .ch-in::after { box-shadow: none; }

html[data-theme="paper"] hr,
html[data-theme="daylight"] hr {
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
}

html[data-theme="paper"] .callout,
html[data-theme="daylight"] .callout { background: var(--surface2) !important; }

/* ---- добор: элементы уроков, у которых цвет текста был зашит светлым ---- */

html[data-theme] .fs,
html[data-theme] .core .sp,
html[data-theme] .pl-v > i { color: var(--fg); }

html[data-theme] .sources h1,
html[data-theme] .ctr h2,
html[data-theme] .lv li span,
html[data-theme] table tr > :first-child,
html[data-theme] details.tech > summary,
html[data-theme] .nav a { color: var(--muted); }

html[data-theme] .deck p + p,
html[data-theme] .pl-m > i,
html[data-theme] details.tech > summary::after { color: var(--dim); }

html[data-theme] details.tech[open] > summary,
html[data-theme] .core .cx,
html[data-theme] .lv li b { color: var(--strong); }

html[data-theme] .pl-p > i,
html[data-theme] .lv li::before,
html[data-theme] .nav a:hover { color: var(--accent-fg); }

html[data-theme] .nav { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html[data-theme] details.tech { background: var(--surface); }
html[data-theme] .core .sp { background: var(--surface); }

/* Ядро схемы и разделители: в светлых темах фиолетовое свечение уходит в белизну */
html[data-theme="paper"] .core .cx,
html[data-theme="daylight"] .core .cx {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
html[data-theme="paper"] hr.pdiv,
html[data-theme="daylight"] hr.pdiv {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
html[data-theme="paper"] .core::before,
html[data-theme="daylight"] .core::before {
  background: linear-gradient(var(--border), var(--accent), var(--border));
}
html[data-theme="paper"] .core::after,
html[data-theme="daylight"] .core::after {
  background: linear-gradient(90deg, var(--border), var(--accent), var(--border));
}

/* Плашка «картинка не подгрузилась» */
html[data-theme="paper"] .imgmiss,
html[data-theme="daylight"] .imgmiss {
  background: color-mix(in srgb, #dc2626 8%, var(--surface));
  color: #b91c1c; border-color: #b91c1c;
}

/* Плюс-минус в списках: на светлом нужны глубже */
html[data-theme="paper"] .c-green li::before,
html[data-theme="daylight"] .c-green li::before { color: #15803d; }
html[data-theme="paper"] .c-red li::before,
html[data-theme="daylight"] .c-red li::before { color: #b91c1c; }
html[data-theme="paper"] .pl-x > i,
html[data-theme="daylight"] .pl-x > i { color: #b91c1c; }

/* Цветные врезки Тома задают фон инлайном: подсветим их мягко, текст всегда читаемый */
html[data-theme="paper"] .callout,
html[data-theme="daylight"] .callout { color: var(--fg); }
html[data-theme="paper"] .callout *,
html[data-theme="daylight"] .callout * { color: inherit; }
html[data-theme="paper"] .callout h1, html[data-theme="daylight"] .callout h1,
html[data-theme="paper"] .callout h2, html[data-theme="daylight"] .callout h2,
html[data-theme="paper"] .callout h3, html[data-theme="daylight"] .callout h3,
html[data-theme="paper"] .callout h4, html[data-theme="daylight"] .callout h4 { color: var(--strong); }