/* ============================================================
   Окупаем — токены темы. Значения 1:1 из макетов Claude Design
   (июль 2026). Светлая — молочный/графит, тёмная — тёплая, не синяя.
   Зелёный = действие: ссылки, кнопки, прогресс, финал статьи.
   ============================================================ */

:root,
[data-theme="light"] {
    --bg: #FBF9F5;
    --surface: #FFFFFF;
    --fg: #151515;
    --muted: #6F6A60;
    --line: #E7E1D7;
    --green: #17694A;
    --green-soft: #17694A12;
    --tag-bg: #151515;
    --tag-fg: #FBF9F5;
    --chrome: #F2EEE7;
    --on-green: #FBF9F5;

    /* Тёмная плашка «Окупились?» на главной */
    --band: #151515;
    --band-fg: #FBF9F5;
    --band-muted: #B7B1A6;
    --band-line: #3A3831;
    --band-surface: #242219;

    /* Алиасы для HTML-карточек в статьях (finchart, fin-block):
       карточка вставляется в редактор и наследует тему через --okp-* */
    --okp-surface: var(--surface);
    --okp-fg: var(--fg);
    --okp-muted: var(--muted);
    --okp-line: var(--line);
    --okp-green: var(--green);
    --okp-chart-green: #17694A;
}

[data-theme="dark"] {
    --bg: #1A1813;
    --surface: #222019;
    --fg: #EFEBE3;
    --muted: #A29C90;
    --line: #33302A;
    --green: #3FA079;
    --green-soft: #3FA07920;
    --tag-bg: #EFEBE3;
    --tag-fg: #1A1813;
    --chrome: #26231C;
    --on-green: #10261D;

    --band: #10261D;
    --band-fg: #EFEBE3;
    --band-muted: #8FA79B;
    --band-line: #274A3A;
    --band-surface: #16332686;

    --okp-surface: var(--surface);
    --okp-fg: var(--fg);
    --okp-muted: var(--muted);
    --okp-line: var(--line);
    --okp-green: var(--green);
    --okp-chart-green: #3FA079;
}

:root {
    /* Шрифты — self-host, кириллица+латиница (assets/fonts) */
    --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
    --font-text: "Onest", Arial, sans-serif;
    --font-serif: "Literata", Georgia, serif;

    /* Геометрия */
    --tap-min: 44px;
    --radius-s: 8px;
    --radius-m: 10px;
    --radius-l: 12px;

    /* Ширина колонок */
    --w-article: 680px;
    --w-page: 1200px;
}