/*
 * tokens.css — дизайн-система Коллект-CRM.
 *
 * Единственный источник цветов, шрифта и теней. Подключается после всех
 * остальных таблиц стилей, чтобы перекрыть их :root.
 *
 * Тема — атрибут data-theme на <html>: theme.js ставит light/dark, в режиме
 * «система» — значение по prefers-color-scheme. Медиазапрос ниже — запасной
 * путь, если атрибута нет (скрипт не успел или отключён).
 *
 * Внизу — мост старых имён (--surface2, --border2, --ok-soft, --gc-* …):
 * styles.css, desk.css, messenger.css и др. перекрашиваются без правки правил.
 */

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/onest-cyrillic-wght-normal.fe2bd26ae82a.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/onest-latin-wght-normal.3db826ed1c5d.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------- светлая тема */

:root {
    --font: "Onest", "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --bg: #F3F4F6;
    --surface: #FFFFFF;
    --surface-muted: #FAFAFB;
    --sidebar-bg: #EEF2F8;
    --sidebar-border: #DDE4EE;

    --border: #ECEDF1;
    --border-row: #EEF0F3;
    --border-control: #E2E4E9;

    --text: #171A21;
    --text-2: #3D4452;
    --text-nav: #2B3445;
    --text-brand: #1F2A3D;
    --muted: #5F6675;

    --icon: #6B7A90;
    --chevron: #8090A6;

    --accent: #2D5BD8;
    --accent-hover: #1E44A8;
    --accent-soft: #EAF0FD;
    --accent-soft-text: #2348B8;
    --accent-text: #2D5BD8;        /* ссылки и текст акцентом */

    --nav-active-bg: #E2EAF6;
    --nav-active-border: #CCDAEE;
    --nav-active-text: #2A52C4;
    --nav-hover: #E4EAF3;

    --pill-bg: #E9EEF6;
    --pill-text: #2A3B57;
    --pill-hover: #DDE5F1;

    --tabs-track: #E9EBEF;
    --tab-active-shadow: 0 1px 2px rgba(23, 26, 33, .08);
    --tab-count-bg: rgba(23, 26, 33, .06);

    --row-selected: #F1F5FF;
    --row-hover: rgba(23, 26, 33, .025);

    --ok-bg: #E8F4EC;
    --ok-text: #1E6A41;
    --warn-text: #9A4600;

    --level: #E2A93B;
    --level-text: #2E2100;
    --avatar: #3E5FB0;

    --bulk-bg: #171A21;
    --bulk-text: #FFFFFF;
    --bulk-btn: rgba(255, 255, 255, .08);
    --bulk-btn-hover: rgba(255, 255, 255, .16);
    --bulk-divider: rgba(255, 255, 255, .16);
    --bulk-shadow: 0 12px 32px rgba(23, 26, 33, .22);
    --bulk-primary-bg: #FFFFFF;
    --bulk-primary-text: #171A21;

    --on-accent: #FFFFFF;
    --focus: 2px solid var(--accent);
    --focus-offset: 2px;

    /* Семантика вне ТЗ (ошибки, инфо, фиолетовые метки) — в той же гамме */
    --bad-text: #B42318;
    --bad-bg: #FDECEA;
    --bad-border: #F4C7C2;
    --info-text: #1F5FA8;
    --info-bg: #E8F1FB;
    --info-border: #C6DBF2;
    --pur-text: #6B3FA0;
    --pur-bg: #F1EBF9;
    --pur-border: #DCCBF0;
    --ok-border: #C5E3CF;
    --warn-bg: #FDF1E4;
    --warn-border: #F2D3B0;
    --accent-border: #C9D7F7;

    --shadow-sm: 0 1px 2px rgba(23, 26, 33, .04);
    --shadow-lg: 0 18px 44px rgba(23, 26, 33, .18);
    --overlay: rgba(23, 26, 33, .45);

    color-scheme: light;
}

/* -------------------------------------------------------- тёмная тема */

:root[data-theme="dark"] {
    --bg: #0F1217;
    --surface: #181D26;
    --surface-muted: #1C222C;
    --sidebar-bg: #141922;
    --sidebar-border: #252C38;

    --border: #262D39;
    --border-row: #232A35;
    --border-control: #2E3644;

    --text: #E6E9EF;
    --text-2: #C3CAD6;
    --text-nav: #D3D9E3;
    --text-brand: #EEF1F6;
    --muted: #939DAE;

    --icon: #8B97AA;
    --chevron: #6F7B8E;

    --accent: #3D6AE0;
    --accent-hover: #5B86F0;
    --accent-soft: #1E2A45;
    --accent-soft-text: #A9C2FF;
    --accent-text: #7A9CF2;        /* #3D6AE0 как текст даёт 3.5:1 */

    --nav-active-bg: #1F2B44;
    --nav-active-border: #2E4370;
    --nav-active-text: #A9C2FF;
    --nav-hover: #1C2330;

    --pill-bg: #1F2633;
    --pill-text: #C9D3E3;
    --pill-hover: #273042;

    --tabs-track: #1C222C;
    --tab-active-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --tab-count-bg: rgba(255, 255, 255, .07);

    --row-selected: #1C2740;
    --row-hover: rgba(255, 255, 255, .03);

    --ok-bg: #16301F;
    --ok-text: #7FD3A0;
    --warn-text: #F0A35E;

    --bulk-bg: #2A3140;

    --bad-text: #FF8A80;
    --bad-bg: #3A1A1A;
    --bad-border: #5E2B2B;
    --info-text: #8AB8F0;
    --info-bg: #17263A;
    --info-border: #2B4566;
    --pur-text: #C3A6EE;
    --pur-bg: #261D36;
    --pur-border: #43345E;
    --ok-border: #24503A;
    --warn-bg: #33230F;
    --warn-border: #5A3F1E;
    --accent-border: #2E4370;

    --shadow-sm: none;
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
    --overlay: rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* Запасной путь: атрибута нет, а система в тёмной теме. Значения те же. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0F1217;
        --surface: #181D26;
        --surface-muted: #1C222C;
        --sidebar-bg: #141922;
        --sidebar-border: #252C38;
        --border: #262D39;
        --border-row: #232A35;
        --border-control: #2E3644;
        --text: #E6E9EF;
        --text-2: #C3CAD6;
        --text-nav: #D3D9E3;
        --text-brand: #EEF1F6;
        --muted: #939DAE;
        --icon: #8B97AA;
        --chevron: #6F7B8E;
        --accent: #3D6AE0;
        --accent-hover: #5B86F0;
        --accent-soft: #1E2A45;
        --accent-soft-text: #A9C2FF;
        --accent-text: #7A9CF2;
        --nav-active-bg: #1F2B44;
        --nav-active-border: #2E4370;
        --nav-active-text: #A9C2FF;
        --nav-hover: #1C2330;
        --pill-bg: #1F2633;
        --pill-text: #C9D3E3;
        --pill-hover: #273042;
        --tabs-track: #1C222C;
        --tab-active-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --tab-count-bg: rgba(255, 255, 255, .07);
        --row-selected: #1C2740;
        --row-hover: rgba(255, 255, 255, .03);
        --ok-bg: #16301F;
        --ok-text: #7FD3A0;
        --warn-text: #F0A35E;
        --bulk-bg: #2A3140;
        --bad-text: #FF8A80;
        --bad-bg: #3A1A1A;
        --bad-border: #5E2B2B;
        --info-text: #8AB8F0;
        --info-bg: #17263A;
        --info-border: #2B4566;
        --pur-text: #C3A6EE;
        --pur-bg: #261D36;
        --pur-border: #43345E;
        --ok-border: #24503A;
        --warn-bg: #33230F;
        --warn-border: #5A3F1E;
        --accent-border: #2E4370;
        --shadow-sm: none;
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
        --overlay: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

/* ------------------------------------------- мост старых имён токенов */
/* Ссылки через var(): значения сами переключаются вместе с темой. */

:root,
:root[data-theme="dark"] {
    --surface2: var(--surface-muted);
    --surface3: var(--tabs-track);
    --border2: var(--border-control);
    --faint: var(--muted);
    --accent-bd: var(--accent-border);
    --ok: var(--ok-text);
    --ok-soft: var(--ok-bg);
    --ok-bd: var(--ok-border);
    --warn: var(--warn-text);
    --warn-soft: var(--warn-bg);
    --warn-bd: var(--warn-border);
    --bad: var(--bad-text);
    --bad-soft: var(--bad-bg);
    --bad-bd: var(--bad-border);
    --danger: var(--bad-text);
    --info: var(--info-text);
    --info-soft: var(--info-bg);
    --info-bd: var(--info-border);
    --pur: var(--pur-text);
    --pur-soft: var(--pur-bg);
    --pur-bd: var(--pur-border);
    --sh: var(--shadow-sm);

    /* --gc-* — палитра прежнего theme-tokens.css (gamification, shell) */
    --gc-bg: var(--bg);
    --gc-surface: var(--surface);
    --gc-surface-2: var(--surface-muted);
    --gc-surface-3: var(--tabs-track);
    --gc-surface-overlay: var(--surface);
    --gc-border: var(--border);
    --gc-border-strong: var(--border-control);
    --gc-text: var(--text);
    --gc-text-muted: var(--muted);
    --gc-text-subtle: var(--muted);
    --gc-accent: var(--accent);
    --gc-accent-strong: var(--accent);
    --gc-accent-soft: var(--accent-soft);
    --gc-accent-alt: var(--pur-text);
    --gc-accent-alt-bd: var(--pur-border);
    --gc-brand: var(--accent);
    --gc-success: var(--ok-text);
    --gc-success-ink: var(--ok-text);
    --gc-success-bd: var(--ok-border);
    --gc-warning: var(--level);
    --gc-warning-ink: var(--warn-text);
    --gc-warning-soft: var(--warn-bg);
    --gc-warning-bd: var(--warn-border);
    --gc-danger: var(--bad-text);
    --gc-danger-ink: var(--bad-text);
    --gc-danger-bd: var(--bad-border);
    --gc-info: var(--info-text);
    --gc-info-ink: var(--info-text);
    --gc-info-bd: var(--info-border);
    --gc-shadow-sm: var(--shadow-sm);
}

/* ------------------------------------------------------------- база */

html {
    background: var(--bg);
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
    outline: var(--focus);
    outline-offset: var(--focus-offset);
}