/* ═══════════════════════════════════════════════════════════════════
   ЗІН-ДИЗАЙН-СИСТЕМА · ТОКЕНИ (ds/tokens.css)
   Єдине джерело кольорів, типографіки, радіусів, тіней, відступів і шарів.
   Діє ЛИШЕ під html.ui-z (прапорець ?ui=z). Без прапорця файл нічого не змінює.
   Темна тема живе ТІЛЬКИ тут: компоненти пишуть var(--token), а не [data-theme] + хардкод.
   Специфічність html.ui-z (0,1,1) і html.ui-z[data-theme="dark"] (0,2,1) навмисно вища
   за .ui-v2 (0,1,0) / .ui-v2[data-theme="dark"] (0,2,0) / [data-theme="dark"] (0,1,0).
   ═══════════════════════════════════════════════════════════════════ */

html.ui-z {
    color-scheme: light;

    /* ---------- Кольори: поверхні й текст ---------- */
    --paper: #f5f0ec;          /* тло екрана */
    --surface: #fffdfb;        /* картки */
    --surface-2: #f9f6f2;      /* вкладені зони, поля вводу */
    --ink: #2a2622;            /* основний текст */
    --ink-2: #5c544c;          /* вторинний текст */
    --muted: #736b62;          /* підписи ≥ 11px (5.16:1 на surface) */
    --muted-2: #a39a90;        /* лише декор і плейсхолдери — не для тексту */
    --line: #2a2622;           /* товсті зін-рамки 2–3px */
    --hairline: #e5ddd5;       /* роздільники 1px */
    --shadow-c: #2a2622;       /* колір офсет-тіні */
    --on-accent: #2a2622;      /* текст на orange / sage (в обох темах темний) */
    /* Інверсна поверхня (темна метрика, тост): у світлій — темна, у темній — кремова */
    --inverse-bg: #2a2622;
    --inverse-fg: #f5f0ec;
    --inverse-accent: #a8d8b0; /* число на інверсній плашці (9.4:1) */
    --inverse-muted: #a39a90;
    /* «Сильна» метрика (прогноз балу, останній НМТ-тест): у світлій — темна плашка,
       у темній — НЕ кремова інверсія (вона перебивала помаранчеву дію), а surface-2 із шавлієвим числом */
    --metric-strong-bg: #2a2622;
    --metric-strong-fg: #f5f0ec;
    --metric-strong-num: #a8d8b0;
    --metric-strong-muted: #a39a90;

    /* ---------- Семантика ---------- */
    --sage: #7c9d85;           /* вибране, успіх, прогрес */
    --sage-tint: #eaf2e3;
    --sage-ink: #42604b;       /* посилання, лічильники на surface/tint */
    --orange: #ef8748;         /* ЛИШЕ головна дія (CTA) */
    --orange-tint: #fdeee2;
    --orange-ink: #9a4a17;
    --red: #dc4040;            /* помилка: рамка, іконка */
    --red-tint: #fbe3e3;
    --red-ink: #a82f2f;        /* текст помилки */
    --gold: #e8b53a;
    --silver: #b9b4ad;
    --bronze: #c9885a;
    --scrim: rgba(28, 24, 20, .55);
    /* Графік прогресу: нейтральна крапка «нижче середини курсу» — ΔE ≥ 15 до --brand-ink (і для дальтоніків), ≥ 3:1 на surface */
    --chart-mid: #8a8177;
    /* …і край смуги «більшість курсу» (p25–p75): ≥ 3:1 на surface, але тихіше за риску-середину */
    --chart-edge: var(--chart-mid);

    /* ---------- Бренд (зелений з іконки застосунку) ---------- */
    --brand: #227840;          /* знак «НМТ», фокус; білий текст на ньому 5.48:1 */
    --brand-tint: #e2f0e6;
    --brand-ink: #227840;      /* зелений текст на surface/paper */
    --sky-tint: #ebf4f8;       /* спокійний блакитний фон (статистика «Цього тижня») */
    --sky-ink: #245a6e;
    --on-brand: #ffffff;
    --focus: #227840;          /* кільце фокусу (4.85:1 на paper) */

    /* Кнопка Apple (HIG): чорна у світлій, біла в темній */
    --apple-bg: #000000;
    --apple-fg: #ffffff;
    /* Рисунки задач (чорні лінії) лежать на світлій плашці в обох темах */
    --figure-bg: #f5f0ec;
    --figure-ink: #2a2622;     /* лінії рисунка на світлій плашці — темні в обох темах */

    /* ---------- Типографіка ---------- */
    /* Onest (змінний 400–900) — УВЕСЬ інтерфейс: текст, кнопки, вкладки, заголовки карток і екранів.
       Unbounded 700 — ЛИШЕ великі числа (бал, прогноз, метрики, підсумки) і дисплейний заголовок лендингу (.z-display);
       він на ~25 % ширший, тож не для тексту, що може переноситися. Формули й варіанти — Gelasio/KaTeX, як і раніше.
       Шрифти вантажить сторінка (Google Fonts, display=swap): Onest:wght@400..900 + Unbounded:wght@700. */
    --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-display: 700;         /* єдине завантажене накреслення Unbounded */
    --font-math: 'Gelasio', Georgia, serif;
    --fs-display: clamp(30px, 8vw, 40px);
    --lh-display: 1.05;
    --fs-h1: 26px;
    --fs-h2: 19px;
    --fs-h3: 15px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-eyebrow: 11px;
    --fs-num: 36px;
    --fw-body: 600;
    --fw-strong: 800;
    --fw-black: 900;

    /* ---------- Радіуси, лінії, тіні ---------- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-pill: 999px;
    --bw: 3px;
    --bw-s: 2px;
    --sh-s: 3px 3px 0 var(--shadow-c);
    --sh-l: 5px 5px 0 var(--shadow-c);
    --sh-press: 1px 1px 0 var(--shadow-c);

    /* ---------- Відступи (крок 4) ---------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --gutter: 16px;
    --content-max: 720px;

    /* ---------- Шари ---------- */
    --z-appbar: 50;
    --z-tabbar: 60;
    --z-banner: 70;
    --z-sheet: 100;
    --z-modal: 110;
    --z-toast: 120;
    --z-lightbox: 130;
    --tabbar-h: 64px;

    /* ---------- Рух ---------- */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* ---------- Медійна палітра сторіз (ds/stories.css): ЛИШЕ вміст слайдів ----------
       Однакові в обох темах — як у сторіз-плеєрах, слайд сам задає світле чи темне тло.
       Інтерфейс застосунку (стрічка, кнопки переглядача) ці кольори не бере — лише токени вище. */
    --st-ink: #2a2622;
    --st-ink-2: #5c544c;
    --st-muted: #736b62;
    --st-paper: #fffdfb;
    --st-cream: #f5f0ec;
    --st-green: #227840;
    --st-green-tint: #e3f1e7;
    --st-green-shade: #1a4d2b;
    --st-sage-ink: #42604b;
    --st-mint: #bfe0c9;
    --st-orange: #ef8748;
    --st-orange-tint: #fdeee2;
    --st-gold: #f2c14e;
    --st-gold-tint: #fdf3d6;
    --st-sky: #cfe3ea;
    --st-red: #dc4040;
    --st-red-tint: #fbe3e3;
    --st-red-ink: #a42a2a;
    --st-night: #1c1a18;
    --st-night-2: #3a352f;
    --st-black: #000000;
    --st-white: #ffffff;
    --st-backdrop: rgba(18, 16, 14, .94);
    --st-shade-1: rgba(0, 0, 0, .5);
    --st-shade-2: rgba(0, 0, 0, .18);
    --st-shade-3: rgba(0, 0, 0, .3);
    --st-shade-4: rgba(0, 0, 0, .45);
    --st-shade-5: rgba(0, 0, 0, .55);
    --st-track: rgba(255, 255, 255, .35);
    --st-track-light: rgba(42, 38, 34, .22);
    --st-glow-gold: rgba(242, 193, 78, .22);
    --st-glow-gold-2: rgba(242, 193, 78, .16);
    --st-glow-orange: rgba(239, 135, 72, .22);
    --st-glow-green: rgba(34, 120, 64, .35);
    --st-grid: rgba(34, 120, 64, .07);
    --st-dash: rgba(42, 38, 34, .14);
    --st-stripe: rgba(255, 255, 255, .12);
    --st-sheen: rgba(255, 255, 255, .55);
    --st-dim: rgba(245, 240, 236, .18);
    --st-fig-shade: rgba(42, 38, 34, .18);
    --st-edge: rgba(255, 253, 251, .9);
    --st-ring: linear-gradient(135deg, #227840 0%, #7fb04a 38%, #f2c14e 62%, #ef8748 100%);

    /* ---------- Легасі-аліаси: старий код під .ui-z бере нову палітру ---------- */
    --primary: var(--sage);
    --primary-dark: #5f8069;
    --primary-light: var(--sage-tint);
    --bg-white: var(--surface);
    --bg-light: var(--surface-2);
    --bg-gray: var(--paper);
    --text-dark: var(--ink);
    --text-muted: var(--muted);
    --text-light: var(--muted-2);
    --border-color: var(--hairline);
    --border-light: #efe7df;
    --link-color: var(--sage-ink);
    --success: #598e2e;
    --success-light: var(--sage-tint);
    --danger: var(--red);
    --danger-light: var(--red-tint);
    --info: #3f7fb8;
    --info-light: #e7f0f7;
    --warning-bg: #fdf3ea;
    --warning-border: #f3c9a5;
    --green-ink: var(--brand-ink);
    --amber-ink: #a86400;
    --card-border: var(--hairline);
    --card-bg: var(--surface);
    --border: var(--hairline);       /* у ui-v2 --border — волосяна лінія; товста зветься --line */
    --border-2: #efe7df;
    --sage-dark: #5f8069;
    --sage-tint-2: var(--sage-tint);
    --orange-dark: #c96a2c;
    --orange-tint-2: #fdf3ea;
    --orange-border: #f3c9a5;
    --green: #598e2e;
    --zin-sh: var(--shadow-c);
    --duo-radius: var(--r-lg);
    --duo-blue: var(--sage);
    --duo-blue-dark: var(--sage-dark);
    --duo-red: var(--red);
    --duo-red-dark: var(--red-ink);
}

@media (min-width: 600px) {
    html.ui-z { --gutter: 24px; }
}

html.ui-z[data-theme="dark"] {
    color-scheme: dark;

    --paper: #1c1a18;
    --surface: #262320;
    --surface-2: #2f2b27;
    --ink: #f5f0ec;
    --ink-2: #cfc7bc;
    --muted: #a39a90;
    --muted-2: #7f7870;
    --line: #7a7168;           /* у темній рамки приглушені, не кремові */
    --hairline: #3b3733;
    --shadow-c: #000000;
    --on-accent: #1c1a18;
    --inverse-bg: #f5f0ec;
    --inverse-fg: #2a2622;
    --inverse-accent: #42604b;
    --inverse-muted: #5c544c;
    --metric-strong-bg: #2f2b27;
    --metric-strong-fg: #f5f0ec;
    --metric-strong-num: #a8d8b0;
    --metric-strong-muted: #a39a90;

    --sage: #a8d8b0;
    --sage-tint: #24302a;
    --sage-ink: #cfe9d3;
    --orange: #ef8748;
    --orange-tint: #38251a;
    --orange-ink: #f0a875;
    --red: #e56a6a;
    --red-tint: #3a2626;
    --red-ink: #f0a9a2;
    --gold: #e8b53a;
    --silver: #b9b4ad;
    --bronze: #c9885a;
    --scrim: rgba(0, 0, 0, .65);
    --chart-mid: var(--muted);
    --chart-edge: var(--muted-2);

    --brand: #227840;
    --brand-tint: #1d2e23;
    --brand-ink: #8fd6a6;
    --sky-tint: #1b2a31;
    --sky-ink: #9ed0e2;
    --on-brand: #ffffff;
    --focus: #8fd6a6;

    --apple-bg: #ffffff;
    --apple-fg: #000000;
    --figure-bg: #f5f0ec;
    --figure-ink: #2a2622;     /* лінії рисунка на світлій плашці — темні в обох темах */

    --primary: var(--sage);
    --primary-dark: #86c090;
    --primary-light: var(--sage-tint);
    --bg-white: var(--surface);
    --bg-light: var(--surface-2);
    --bg-gray: var(--paper);
    --text-dark: var(--ink);
    --text-muted: var(--muted);
    --text-light: var(--muted-2);
    --border-color: var(--hairline);
    --border-light: #33302b;
    --link-color: var(--sage-ink);
    --success: #86c090;
    --success-light: var(--sage-tint);
    --danger: var(--red);
    --danger-light: var(--red-tint);
    --info: #7db8e8;
    --info-light: #1f2a33;
    --warning-bg: #2e2019;
    --warning-border: #4a3423;
    --green-ink: var(--brand-ink);
    --amber-ink: #e0b666;
    --card-border: var(--hairline);
    --card-bg: var(--surface);
    --border: var(--hairline);
    --border-2: #33302b;
    --sage-dark: #86c090;
    --sage-tint-2: var(--sage-tint);
    --orange-dark: #f0a875;
    --orange-tint-2: #2e2019;
    --orange-border: #4a3423;
    --green: #86c090;
    --zin-sh: var(--shadow-c);
    --duo-blue: var(--sage);
    --duo-blue-dark: var(--sage-dark);
    --duo-red: var(--red);
    --duo-red-dark: var(--red-ink);

    /* Змінні старого темного блоку styles.css — тепер у теплій палітрі */
    --green-tint-bg: var(--sage-tint);
    --green-tint-bd: #3b5a44;
    --green-tint-ink: var(--sage-ink);
    --red-tint-bg: var(--red-tint);
    --red-tint-bd: #5a3230;
    --red-tint-ink: var(--red-ink);
    --warn-ink: #e0b666;

    /* Міст для холодних хардкодів старого темного блоку (styles.css, var(--zd-*, #старий)):
       без прапорця змінні не визначені → лишається старий колір; під .ui-z — токени. */
    --zd-surface: var(--surface);
    --zd-surface-2: var(--surface-2);
    --zd-line: var(--hairline);
    --zd-muted: var(--muted);
    --zd-placeholder: var(--muted-2);
    --zd-tint: var(--sage-tint);
    --zd-tint-line: #3b5a44;
    --zd-accent: var(--sage-ink);
    --zd-figure: var(--figure-bg);
}