/* Дизайн-токены: шрифты, переменные, типографика, belt-палитра */

/* === Шрифты (self-host, Cyrillic + Latin субсеты) === */
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/bitter-600-cyrillic.f823fc9528ea.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/bitter-600-cyrillic-ext.72eccfa38326.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/bitter-600-latin.4d39c44e6833.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/bitter-600-latin-ext.ac71e78c812e.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-400-cyrillic.2b8fbbb33a14.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-400-cyrillic-ext.c7635a080bad.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-400-latin.f57df9832ab8.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/golos-400-latin-ext.b0503aa2cc13.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-600-cyrillic.2b8fbbb33a14.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-600-cyrillic-ext.c7635a080bad.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-600-latin.f57df9832ab8.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/golos-600-latin-ext.b0503aa2cc13.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* === Переменные (поверх Bootstrap --bs-*) === */
:root {
    /* принудительная тёмная тема телефона инвертирует ленту поясов и
       статусные пары: своей тёмной темы у раздела нет, схема одна */
    color-scheme: only light;
    /* один темп на раздел: переходы не расходятся по длительности */
    --tkd-motion: 200ms ease-out;

    --bs-primary: #234382;
    --bs-primary-rgb: 35, 67, 130;
    --bs-link-color: #234382;
    /* Bootstrap красит ссылку через rgb-форму: без неё цвет выше не работает */
    --bs-link-color-rgb: 35, 67, 130;
    --bs-link-hover-color: #1b3266;
    --bs-border-color: #e4e8f0;
    --bs-body-color: #1f2430;
    --bs-body-bg: #ffffff;
    --bs-body-font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;

    --tkd-accent: #a8213e;
    --tkd-accent-hover: #8c1a33;
    --tkd-sidebar-1: #234382;
    --tkd-sidebar-2: #1a2c50;
    --tkd-app-bg: #f4f6fa;
    --tkd-cell-h: 38px;
    --tkd-totalcol: 130px;
    /* запас под 22 символа самого длинного боевого ФИО в одну строку */
    --tkd-namecol: 240px;
    --tkd-ink: #1f2430;
    --tkd-muted: #6b7280;
    /* muted на белом даёт 4.83:1, на app-bg только 4.47:1 (порог 4.5) */
    --tkd-muted-strong: #656c7a;
    /* фон гашёных поверхностей: muted-strong на нём 4.79:1 */
    --tkd-surface-muted: #f2f4f7;
    --tkd-border-muted: #d7dbe2;
    /* граница поля ввода это единственный признак поля, порог 3:1 */
    --tkd-border-input: #8a93a6;
    /* шкала отступов: без неё интервалы выдумывались на месте,
       и на одном экране их набиралось десять разных */
    --tkd-space-1: 4px;
    --tkd-space-2: 8px;
    --tkd-space-3: 12px;
    --tkd-space-4: 16px;
    --tkd-space-5: 24px;
    --tkd-space-6: 32px;
    --tkd-radius: 14px;
    --tkd-shadow: 0 1px 2px rgba(20, 35, 70, 0.06),
        0 8px 24px rgba(20, 35, 70, 0.08);

    /* семантика статусов: подложка и текст, все пары проверены на AA */
    --tkd-status-done-bg: #e3f2e8;
    --tkd-status-done-fg: #14622f;
    --tkd-status-off-bg: #eef1f6;
    --tkd-status-off-fg: #4b5563;
    --tkd-status-planned-bg: #eef2fa;
    --tkd-status-planned-fg: #234382;
    --tkd-status-error-bg: #fdeaea;
    --tkd-status-error-fg: #9b1c1c;
    --tkd-chip-bg: #eef2fa;
    --tkd-chip-fg: #234382;

    /* belt-палитра: примитивы цветов пояса (статусы анкеты + ранги) */
    --belt-white: #e9ecef;
    --belt-yellow: #f5c518;
    --belt-green: #1e7a45;
    --belt-blue: #234382;
    --belt-red: #c1272d;
    --belt-black: #1a1a1a;
    /* зелёный и красный затемнены под AA: белый текст на них проходит */
    --belt-gold: #f5c518;
    --belt-ink-dark: #1f2430;
    --belt-ink-yellow: #3a2c00;
    --belt-edge-light: #ccd2dd;
}

/* === Типографика === */
body {
    font-family: var(--bs-body-font-family);
    color: var(--tkd-ink);
}

h1,
h2,
h3,
h4,
.lk-title {
    font-family: 'Bitter', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tkd-ink);
}

.btn-primary {
    --bs-btn-bg: #234382;
    --bs-btn-border-color: #234382;
    --bs-btn-hover-bg: #1b3266;
    --bs-btn-hover-border-color: #1b3266;
    --bs-btn-active-bg: #16294f;
}

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a8213e;
    --bs-btn-border-color: #a8213e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8c1a33;
    --bs-btn-hover-border-color: #8c1a33;
}

::selection {
    background: var(--tkd-sidebar-1);
    color: #fff;
}

/* === Цвета поясов по ступеням === */
/* маппинг ранга на цвет: слой токенов, нужен и кабинету, и журналу */
/* у ступеней цвета нет: карточка остаётся нейтральной */
.lk-rank--step {
    --belt-base: var(--tkd-app-bg);
    --belt-ink: var(--tkd-ink);
}

.lk-belt--gup_10 {
    --belt-base: var(--belt-white);
    --belt-ink: var(--belt-ink-dark);
    --belt-edge: var(--belt-edge-light);
}
.lk-belt--gup_9 {
    --belt-base: var(--belt-white);
    --belt-stripe: var(--belt-yellow);
    --belt-ink: var(--belt-ink-dark);
    --belt-edge: var(--belt-edge-light);
}
.lk-belt--gup_8 {
    --belt-base: var(--belt-yellow);
    --belt-ink: var(--belt-ink-yellow);
}
.lk-belt--gup_7 {
    --belt-base: var(--belt-yellow);
    --belt-stripe: var(--belt-green);
    --belt-ink: var(--belt-ink-yellow);
}
.lk-belt--gup_6 {
    --belt-base: var(--belt-green);
    --belt-ink: #fff;
}
.lk-belt--gup_5 {
    --belt-base: var(--belt-green);
    --belt-stripe: var(--belt-blue);
    --belt-ink: #fff;
}
.lk-belt--gup_4 {
    --belt-base: var(--belt-blue);
    --belt-ink: #fff;
}
.lk-belt--gup_3 {
    --belt-base: var(--belt-blue);
    --belt-stripe: var(--belt-red);
    --belt-ink: #fff;
}
.lk-belt--gup_2 {
    --belt-base: var(--belt-red);
    --belt-ink: #fff;
}
.lk-belt--gup_1 {
    --belt-base: var(--belt-red);
    --belt-stripe: var(--belt-black);
    --belt-ink: #fff;
}

/* даны: чёрный пояс, отличаются только римской цифрой.
   класс по ступени, а не по разряду: тот же цвет нужен и точке в истории */
.lk-belt--dan_1,
.lk-belt--dan_2,
.lk-belt--dan_3,
.lk-belt--dan_4,
.lk-belt--dan_5,
.lk-belt--dan_6,
.lk-belt--dan_7,
.lk-belt--dan_8,
.lk-belt--dan_9 {
    --belt-base: var(--belt-black);
    --belt-ink: #fff;
}

/* === Belt-stripe (пояса тхэквондо) === */
.belt-stripe {
    height: 4px;
    width: 100%;
    /* дискретные пояса из токенов: прогрессия рангов, не плавная радуга */
    background: linear-gradient(
        90deg,
        var(--belt-white) 0 16.66%,
        var(--belt-yellow) 16.66% 33.33%,
        var(--belt-green) 33.33% 50%,
        var(--belt-blue) 50% 66.66%,
        var(--belt-red) 66.66% 83.33%,
        var(--belt-black) 83.33% 100%
    );
    border-radius: 2px;
}