/* Фирменный стиль программы «Пул лидеров» (документ «Программа_Пул_лидеров_QazaqGaz финал»): тёмно-синий, золото, кремовые подложки, Century Gothic. Слой поверх tokens.css — тот остаётся дословным из DESIGN_QG, а здесь переопределяются семантические токены и добавляются токены программы. Цвета команд проверены валидатором палитр (dataviz): яркость, насыщенность, различимость при нарушениях цветового зрения. Контраст пар — tests/design. */ :root { /* палитра программы */ --qg-pg-navy-950: #0E1F3B; /* шапка, тёмные полосы */ --qg-pg-navy: #132A4F; /* заголовки, акцент */ --qg-pg-navy-800: #16305A; /* карточки на тёмном */ --qg-pg-navy-700: #1D3A66; --qg-pg-navy-600: #34507F; --qg-pg-navy-line: #2A4775; --qg-pg-ink: #1E2A3A; /* основной текст */ --qg-pg-grey: #5F6979; /* подписи: 5,2:1 на кремовом */ --qg-pg-gold: #A9834A; /* крупный текст и декор */ --qg-pg-gold-line: #C9A46A; /* линейки и рамки */ --qg-pg-gold-text: #8A6A3A; /* мелкий «золотой» текст на светлом: 4,7:1 */ --qg-pg-gold-on-navy: #E0C08A; --qg-pg-gold-soft: #E9D3A8; --qg-pg-on-navy: #B9C3D3; --qg-pg-warn-on-navy: #F2C979; /* таймер на тёмной полосе планшета */ --qg-pg-bad-on-navy: #F0A1A7; /* шапка дашборда «Пул лидеров в цифрах» — цвета инфографики программы; тёмная в обеих темах */ --qg-pg-hero-glow: #06397F; --qg-pg-hero-mid: #02224D; --qg-pg-hero-deep: #001534; --qg-pg-hero-base: #000F28; --qg-pg-hero-gold: #E0B888; /* числа и надпись «Первый поток»: 9,6:1 на #02224D */ --qg-pg-cream: #FBF8F3; --qg-pg-cream-2: #F4EEE3; --qg-pg-sand: #EDE4D3; --qg-pg-sand-2: #E6D7BC; /* цвета команд в порядке актов — один цвет команды на всех экранах */ --qg-team-1: #2457A6; --qg-team-1-bg: #E8EEF7; --qg-team-1-ink: #1C4785; --qg-team-1-on-navy: #7FA3E0; --qg-team-2: #B8862E; --qg-team-2-bg: #F6EDDC; --qg-team-2-ink: #7A5718; --qg-team-2-on-navy: #E3B865; --qg-team-3: #0E93A8; --qg-team-3-bg: #E1F3F6; --qg-team-3-ink: #0A6475; --qg-team-3-on-navy: #5FC6D6; --qg-team-4: #7B3F8F; --qg-team-4-bg: #F1E7F4; --qg-team-4-ink: #5C2C6B; --qg-team-4-on-navy: #C08FD0; --qg-team-5: #5E8B3A; --qg-team-5-bg: #EBF2E5; --qg-team-5-ink: #3F6026; --qg-team-5-on-navy: #9BC97A; --qg-font-sans: "Century Gothic", "Avenir Next", "Segoe UI", Inter, system-ui, sans-serif; --qg-radius: 12px; --qg-radius-lg: 16px; } :root, :root[data-theme="light"] { --qg-bg: var(--qg-pg-cream); --qg-surface: #FFFFFF; --qg-surface-sunken: var(--qg-pg-cream-2); --qg-surface-popover: #FFFFFF; --qg-text: var(--qg-pg-ink); --qg-text-secondary: #3A4658; --qg-text-muted: var(--qg-pg-grey); --qg-text-subtle: #7C8594; --qg-text-accent: var(--qg-pg-navy); --qg-text-inverse: #FFFFFF; --qg-border: var(--qg-pg-sand); --qg-border-strong: #D9C6A0; --qg-border-accent: var(--qg-pg-gold-line); --qg-accent: var(--qg-pg-navy); --qg-accent-hover: var(--qg-pg-navy-700); --qg-accent-quiet: #EEF1F6; --qg-focus: var(--qg-pg-gold); --qg-rule: var(--qg-pg-gold-line); --qg-ok: #2F6B45; --qg-ok-bg: #EAF4EC; --qg-warn: #8F5F0A; --qg-warn-bg: #FBF3E2; --qg-bad: #A3313A; --qg-bad-bg: #F9ECEC; --qg-shadow-card: 0 1px 2px rgb(19 42 79 / 4%), 0 8px 24px rgb(19 42 79 / 5%); --qg-chart-1: var(--qg-team-1); --qg-chart-2: var(--qg-team-2); --qg-chart-3: var(--qg-team-3); --qg-chart-4: var(--qg-team-4); --qg-chart-5: var(--qg-team-5); --qg-chart-muted: var(--qg-pg-sand-2); --qg-chart-grid: var(--qg-pg-cream-2); --qg-chart-axis: var(--qg-pg-sand); --qg-chart-reference: var(--qg-pg-gold-line); /* тепловая шкала оценки 0–5: от «нет результата» к «подтверждено». Заливка — светлая, текст на ней основной тёмный (7–10:1); -ink — цифра и обводка ползунка на белом (6–7:1). Цвет не единственный признак: балл виден цифрой на ползунке и подписью ступени. */ --qg-heat-0: #F0A493; --qg-heat-0-ink: #9E2F38; --qg-heat-1: #F4B98A; --qg-heat-1-ink: #97501B; --qg-heat-2: #F2D38A; --qg-heat-2-ink: #7A5B14; --qg-heat-3: #D8DB8E; --qg-heat-3-ink: #5F6619; --qg-heat-4: #A9D4A0; --qg-heat-4-ink: #3A6E35; --qg-heat-5: #7FC49A; --qg-heat-5-ink: #2A6140; --qg-heat-text: var(--qg-pg-ink); /* шапка кабинетов — тёмно-синяя, как баннер программы */ --qg-top-bg: var(--qg-pg-navy-950); --qg-top-text: #FFFFFF; --qg-top-muted: var(--qg-pg-on-navy); --qg-top-accent: var(--qg-pg-gold-on-navy); } :root[data-theme="dark"] { --qg-bg: var(--qg-pg-navy-950); --qg-surface: var(--qg-pg-navy-800); --qg-surface-sunken: #11284C; --qg-surface-popover: var(--qg-pg-navy-700); --qg-text: #F3F4F6; --qg-text-secondary: #DCE1EA; --qg-text-muted: #C3CCDA; --qg-text-subtle: #9AA6B8; --qg-text-accent: var(--qg-pg-gold-on-navy); --qg-text-inverse: var(--qg-pg-navy-950); --qg-border: var(--qg-pg-navy-line); --qg-border-strong: #3A5888; --qg-border-accent: var(--qg-pg-gold-line); --qg-accent: var(--qg-pg-gold-on-navy); --qg-accent-hover: var(--qg-pg-gold-soft); --qg-accent-quiet: rgb(224 192 138 / 14%); --qg-focus: var(--qg-pg-gold-on-navy); --qg-rule: var(--qg-pg-gold-line); --qg-ok: #9BD3AE; --qg-ok-bg: rgb(47 107 69 / 28%); --qg-warn: #F2C979; --qg-warn-bg: rgb(143 95 10 / 30%); --qg-bad: #F0A1A7; --qg-bad-bg: rgb(163 49 58 / 30%); --qg-shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%); --qg-chart-1: var(--qg-team-1-on-navy); --qg-chart-2: var(--qg-team-2-on-navy); --qg-chart-3: var(--qg-team-3-on-navy); --qg-chart-4: var(--qg-team-4-on-navy); --qg-chart-5: var(--qg-team-5-on-navy); --qg-chart-muted: #3A5888; --qg-chart-grid: #1D3A66; --qg-chart-axis: var(--qg-pg-navy-line); --qg-chart-reference: var(--qg-pg-gold-line); --qg-heat-0: #7D3A33; --qg-heat-0-ink: #F0A1A7; --qg-heat-1: #80502C; --qg-heat-1-ink: #F4BE8A; --qg-heat-2: #786628; --qg-heat-2-ink: #F2D38A; --qg-heat-3: #5D6A2C; --qg-heat-3-ink: #D8DB8E; --qg-heat-4: #3E6B40; --qg-heat-4-ink: #A9D4A0; --qg-heat-5: #2C6A4A; --qg-heat-5-ink: #8FD3AE; --qg-heat-text: #F3F4F6; --qg-top-bg: #0A1830; --qg-band-bg: #08142A; /* полоса «Путь вечера» темнее страницы */ --qg-top-text: #FFFFFF; --qg-top-muted: var(--qg-pg-on-navy); --qg-top-accent: var(--qg-pg-gold-on-navy); }