/* ===========================================================================
   tokens.css — палитра, градиенты, текстуры, тени, радиусы, типографика.
   Источник значений: design/README.md §Design tokens и инлайны прототипов
   design/CFA Site.dc.html и design/CFA Styleguide.dc.html (TASKS P4-2).

   Подключается первым: дальше все файлы читают только отсюда, ни одного
   хекса в layout/components/admin быть не должно. Исключение — content.css,
   он портируется из дизайна как есть (условие «WYSIWYG = live»).

   ---------------------------------------------------------------------------
   КАК ЭТИМ ПОЛЬЗОВАТЬСЯ (DESIGN §10 п.11): в критичном свойстве сначала
   пишется сплошное значение, потом var():

       color: #10284a;
       color: var(--c-ink);

   Браузер без custom properties (ярус B, IE 11) вторую строку отбрасывает
   при разборе и остаётся с первой. Браузер с ними — берёт вторую.

   ЧЕГО ЗДЕСЬ СОЗНАТЕЛЬНО НЕТ: значений с clamp()/min()/max() и с
   conic-gradient. Причина неочевидная и стоит того, чтобы её записать.
   Пара «статика + var()» защищает только от непонятого var(). Если var()
   браузеру понятен, а функция ВНУТРИ значения — нет, то подстановка уже
   произошла, и объявление становится невалидным «на этапе вычисления
   значения»: свойство сбрасывается в initial, а НЕ откатывается к
   предыдущей строке. То есть

       background: linear-gradient(...);      <- страховка
       background: var(--tex-rays);           <- внутри conic-gradient

   в Safari 12 или Chrome 60 даст ПРОЗРАЧНЫЙ фон, хуже, чем если бы токена
   не было вовсе. Поэтому лучи солнца и clamp-размеры пишутся литералами
   прямо в правиле, сразу после статической страховки, — там неизвестная
   функция отбивается ещё при разборе и страховка срабатывает (DESIGN §10
   п.4 и п.5). Здесь же лежат только универсально разбираемые значения:
   цвета, linear/radial-градиенты, тени, длины.

   Двухпозиционные стопы («#fff 0 22px») по той же причине развёрнуты в
   классические: они из CSS Images 4 и в ярусе B не разбираются.
   =========================================================================== */

:root {
    color-scheme: light;

    /* -----------------------------------------------------------------
       Палитра. Имена — по роли в дизайне, а не по оттенку: «--c-sky»
       переживёт смену синего, «--c-blue-400» нет.
       ----------------------------------------------------------------- */

    /* Небо: основной акцент, риббоны, ссылки */
    --c-sky:          #1ea7f2;
    --c-sky-pale:     #8fe1ff;   /* верх глянца, линии на тёмном */
    --c-sky-light:    #56c1f7;
    --c-sky-bright:   #5fd0ff;   /* мелкие кнопки */
    --c-sky-mid:      #2cb0f6;
    --c-sky-deep:     #0e8ee0;
    --c-sky-dark:     #0b6fbf;
    --c-deep-sky:     #0b72c2;   /* h2, границы, плинт логотипа */

    /* Тёмное: текст, панели, подвал */
    --c-ink:          #10284a;   /* текст в теле страницы */
    --c-navy:         #0a2a55;   /* текст на светлом, тёмные панели */
    --c-navy-panel:   #0b4f8f;   /* верх тёмного градиента */
    --c-navy-mid:     #0a4f94;
    --c-navy-dim:     #083d78;
    --c-navy-deep:    #061a38;   /* низ подвала, админ-полоса */
    --c-navy-shade:   #041e40;   /* тень под логотипом */

    /* Ссылки */
    --c-link:         #0a66c2;
    --c-link-hover:   #e4262c;
    --c-link-rule:    rgba(10, 102, 194, .35);   /* подчёркивание */

    /* Обводки и разделители */
    --c-outline:      #064a85;   /* борта глянцевых кнопок и риббонов */
    --c-outline-soft: #0a3a6e;   /* контур H1 */
    --c-card-border:  #0b5fa3;
    --c-border-soft:  #9ec3e2;
    --c-border-dot:   #bcd6ea;   /* точечные разделители в списках */
    --c-rule:         #8ea3b8;   /* вертикальные линии в меню */
    --c-frame:        #6b7c90;   /* рамка figure */

    /* Хром: панель меню, вторичные кнопки */
    --c-chrome-0:     #ffffff;
    --c-chrome-1:     #e3ebf3;
    --c-chrome-2:     #b9c8d8;
    --c-chrome-3:     #dfe7ef;

    /* Vanguard-красный: активный пункт меню, опасные действия, чип admin */
    --c-red:          #e4262c;
    --c-red-light:    #ff5a5f;
    --c-red-dark:     #c2121a;
    --c-red-deep:     #9e0d14;
    --c-red-border:   #6d060b;
    --c-red-ring:     #ffd3d4;   /* ободок ромба у h3 */

    /* Buddyfight-оранжевый: тема BFA */
    --c-orange:       #ff7a1a;
    --c-orange-dark:  #e0600b;
    --c-flame-deep:   #b3380a;

    /* Золото: кнопки загрузки, бейджи */
    --c-gold:         #ffc629;
    --c-gold-0:       #ffe56e;
    --c-gold-1:       #ffb51f;
    --c-gold-2:       #ff9500;
    --c-gold-3:       #ff7a00;
    --c-gold-pale:    #fff6c4;
    --c-gold-border:  #9a4200;
    --c-gold-drop:    #8a3a00;
    --c-gold-ink:     #5a3300;   /* текст на золотом бейдже */

    /* Discord: брендовый цвет не трогаем */
    --c-discord:      #5865f2;
    --c-discord-0:    #9aa2ff;
    --c-discord-1:    #6b75f5;
    --c-discord-2:    #4450d6;
    --c-discord-deep: #3b44b8;
    --c-discord-border: #2f38a8;
    --c-discord-pale: #e3e6ff;
    --c-online:       #3ddc3d;   /* точка «N online» */

    /* Лёд: светлые поверхности, шапки таблиц, полоса JUMP TO */
    --c-ice:          #e6f6ff;
    --c-ice-deep:     #cdeafc;
    --c-ice-glow:     #cdeeff;   /* тень под h2 */

    /* Сталь: подписи, мета */
    --c-steel:        #5b6b7e;
    --c-steel-light:  #7a8ca3;
    --c-caption:      #4a5f7a;
    --c-foot-dim:     #9fb6d1;   /* мелкий текст в подвале */
    --c-foot-rule:    rgba(143, 225, 255, .2);    /* линия над копирайтом */
    --c-foot-link-rule: rgba(143, 225, 255, .45); /* подчёркивание в подвале */

    /* Состояния и роли */
    --c-success:      #1fa83a;
    --c-success-border: #0e6b22;
    --c-manager:      #7a3fc9;
    --c-manager-border: #4a1f85;

    /* Поверхности */
    --c-surface:      #ffffff;   /* карточка основного контента */
    /* Сайдбар намеренно ТЕМНЕЕ основной карточки: на белом фоне блоки
       сайдбара читались как продолжение контента, а не как отдельная
       колонка. Расхождение с прототипом сознательное. */
    --c-surface-side: #e5e5e5;

    /* Фон страницы (виден по краям под текстурами) */
    --c-page-0:       #1ea7f2;
    --c-page-1:       #4dbaf5;
    --c-page-2:       #8fd3f8;
    --c-page-3:       #b8e3fa;
    --c-content-0:    #8fd3f8;
    --c-content-1:    #bfe7fb;

    /* -----------------------------------------------------------------
       Глянцевые «split»-градиенты — подпись дизайна. Жёсткий стык на
       ~50% даёт стекло 2010-х; всегда в паре с inset-блеском и сплошной
       нижней тенью (см. --sh-*).
       ----------------------------------------------------------------- */
    --g-sky:      linear-gradient(180deg, #8fe1ff 0%, #2cb0f6 48%, #0e8ee0 52%, #0b6fbf 100%);
    --g-red:      linear-gradient(180deg, #ff5a5f 0%, #e4262c 50%, #c2121a 51%, #9e0d14 100%);
    --g-gold:     linear-gradient(180deg, #ffe56e 0%, #ffb51f 48%, #ff9500 52%, #ff7a00 100%);
    --g-chrome:   linear-gradient(180deg, #ffffff 0%, #e3ebf3 45%, #b9c8d8 52%, #dfe7ef 100%);
    --g-discord:  linear-gradient(180deg, #9aa2ff 0%, #6b75f5 48%, #5865f2 52%, #4450d6 100%);

    /* Двухстоповые варианты: мелкие кнопки, ромбы, плашки */
    --g-sky-soft:  linear-gradient(180deg, #5fd0ff, #0b72c2);
    --g-gold-soft: linear-gradient(180deg, #ffe56e, #ff9500);
    --g-gold-pale: linear-gradient(180deg, #fff6c4, #ffc629);
    --g-red-soft:  linear-gradient(135deg, #ff5a5f, #c2121a);
    --g-ice:       linear-gradient(180deg, #e6f6ff, #cdeafc);
    --g-frame:     linear-gradient(180deg, #ffffff, #dfe7ef);
    --g-white:     linear-gradient(180deg, #ffffff, #dfe3ff);   /* кнопка Join */

    /* Крупные плоскости */
    --g-hero:      linear-gradient(180deg, #1ea7f2 0%, #56c1f7 70%, #0b72c2 100%);
    --g-hero-fade: linear-gradient(180deg, transparent, rgba(6, 74, 133, .25));
    --g-plinth:    linear-gradient(180deg, #0b72c2 0%, #0a4f94 55%, #083d78 100%);
    --g-page:      linear-gradient(180deg, #1ea7f2 0%, #4dbaf5 420px, #8fd3f8 1100px, #b8e3fa 100%);
    --g-content:   linear-gradient(180deg, #8fd3f8, #bfe7fb);
    --g-navy:      linear-gradient(180deg, #0b4f8f, #0a2a55);
    --g-foot:      linear-gradient(180deg, #0b4f8f, #0a2a55 60%, #061a38);

    /* Заливка H1 хромом (идёт в background-clip:text внутри @supports) */
    --g-chrome-text: linear-gradient(180deg, #ffffff 0%, #dfe8f2 40%, #8ea3b8 52%, #e9f0f7 70%, #ffffff 100%);

    /* Темы баннера страницы */
    --g-banner-cfa: linear-gradient(135deg, #0b5fa3, #1ea7f2 60%, #8fe1ff);
    --g-banner-bfa: linear-gradient(135deg, #b3380a, #ff7a1a 55%, #ffc629);

    /* -----------------------------------------------------------------
       Текстуры. По зонам, не смешивать в одной (design/README.md).
       Лучи солнца (conic) здесь отсутствуют намеренно — см. шапку файла.
       ----------------------------------------------------------------- */

    /* Полутон на тёмных панелях и в подвале */
    --tex-halftone: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.4px) 0 0 / 8px 8px;
    --tex-halftone-lite: radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.4px) 0 0 / 8px 8px;
    --tex-halftone-dc: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.2px) 0 0 / 7px 7px;

    /* Шотландка за контентом. Стопы развёрнуты в односоставные:
       запись «rgba(...) 0 22px» — CSS Images 4, ярус B её не разбирает. */
    --tex-plaid:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .35) 22px,
            transparent 22px, transparent 44px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 22px,
            transparent 22px, transparent 44px);

    /* Осколки на фоне страницы. Путь — от каталога css/, где лежит файл,
       который этот токен подставляет (все наши css в assets/css/). */
    --tex-shatter: url(../shatter.svg) 0 0 / 600px 600px;

    /* -----------------------------------------------------------------
       Тени
       ----------------------------------------------------------------- */
    --sh-card:     0 0 0 5px rgba(255, 255, 255, .6), 0 10px 24px rgba(6, 40, 90, .25);
    --sh-box:      0 8px 18px rgba(6, 40, 90, .25);
    --sh-soft:     0 6px 14px rgba(6, 40, 90, .2);
    --sh-gloss:    inset 0 1px 0 rgba(255, 255, 255, .6);
    --sh-gloss-2:  inset 0 2px 0 rgba(255, 255, 255, .75);
    --sh-gloss-sky: inset 0 2px 0 rgba(143, 225, 255, .4);
    --sh-btn-sm:   inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #064a85;
    /* Нажатые состояния плашек сайта: сплошная тень сжимается до 1px
       (design/README.md, «Active (pressed) state»). Небесный бортик —
       --sh-btn-sky-on ниже, в блоке кнопок админки. */
    --sh-btn-sm-on:  inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #064a85;
    --sh-gold-on:    0 1px 0 #9a4200;
    --sh-discord-on: 0 1px 0 #2f38a8;
    --sh-input:   inset 0 2px 3px rgba(6, 40, 90, .12);
    --sh-focus:    0 0 0 3px rgba(30, 167, 242, .3);
    /* Плинт логотипа: тень вверх на арт + внутренняя по верхней кромке */
    --sh-plinth:   0 -2px 0 #064a85, inset 0 3px 8px rgba(0, 20, 60, .4);

    /* -----------------------------------------------------------------
       Тени картинок. drop-shadow, а не box-shadow: логотип и маскоты —
       png с прозрачностью, тень нужна по силуэту, а не по коробке.
       ----------------------------------------------------------------- */
    --dr-logo:      drop-shadow(0 5px 0 #041e40) drop-shadow(0 10px 16px rgba(0, 20, 60, .5));
    --dr-foot-logo: drop-shadow(0 2px 0 #000000);
    --dr-mascot:    drop-shadow(0 4px 4px rgba(0, 0, 0, .35));

    /* -----------------------------------------------------------------
       Радиусы (design/README.md: 3–4 теги, 5–6 мелкие кнопки, 8 кнопки
       и поля, 10 нотисы и figure, 12 карточки, 14–16 большие рамки)
       ----------------------------------------------------------------- */
    --r-tag:  4px;
    --r-xs:   5px;
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   10px;
    --r-xl:   12px;
    --r-2xl:  16px;

    /* -----------------------------------------------------------------
       Типографика. Фолбэки подобраны по метрикам: Trebuchet MS —
       единственный шрифт «из коробки» с похожим на Exo 2 характером,
       Tahoma — узкий грот под Titillium Web.
       ----------------------------------------------------------------- */
    --f-display: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    --f-body:    'Titillium Web', Tahoma, 'Segoe UI', sans-serif;
    --f-mono:    Consolas, 'Courier New', monospace;

    --fs-body:   16px;
    --fs-small:  13px;
    --fs-micro:  12px;
    --lh-body:   1.65;

    /* -----------------------------------------------------------------
       Метрики раскладки
       ----------------------------------------------------------------- */
    --w-page:    1180px;   /* ширина всех центрованных полос */
    --sp-side:   20px;     /* боковой отступ полосы */
    --sp-gutter: 24px;     /* зазор между контентом и сайдбаром */
    --sp-box:    20px;     /* зазор между блоками сайдбара */

    /* -----------------------------------------------------------------
       Админка (TASKS P5-1). Значения — из админского экрана прототипа
       design/CFA Site.dc.html и раздела «Forms (admin)»/«Buttons»
       стайлгайда. Вынесены сюда, а не в admin.css, по тому же правилу:
       хексов в файлах поверх токенов быть не должно.
       ----------------------------------------------------------------- */

    /* Полоса топбара: свой градиент, светлее подвала (--g-navy) */
    --c-adm-top:     #0b3f7a;   /* сплошная страховка под градиент */
    --g-adm-top:     linear-gradient(180deg, #1d5fa6 0%, #0b3f7a 50%, #082f5e 51%, #0a2a55 100%);
    --c-on-navy:     #cfe8ff;   /* текст и неактивные табы на этой полосе */

    /* Чипы: «ADMIN» у логотипа и роль вошедшего. Градиент двухстопный, не
       четырёхстопный --g-red: на плашке 11–13px стык на 50 % не читается. */
    --g-red-chip:    linear-gradient(180deg, #ff5a5f, #c2121a);
    --g-purple-chip: linear-gradient(180deg, #b58cf0, #7a3fc9);

    /* Поля ввода. У select свой градиент — он в прототипе светлее. */
    --c-input-border: #7fb6dc;
    --g-input:        linear-gradient(180deg, #f1f7fc, #ffffff 40%);
    --g-select:       linear-gradient(180deg, #ffffff, #e3ebf3);

    /* Ошибки: блок сообщения и подсветка поля */
    --c-bad-bg:      #fff1f1;
    --c-bad-bg-alt:  #ffe4e4;   /* вторая полоса штриховки отказа */
    --c-bad-field:   #fff5f5;
    /* Штриховка экрана «Admins only». Стопы развёрнуты в классические
       по той же причине, что и везде здесь (см. шапку файла). */
    --tex-denied:    repeating-linear-gradient(45deg,
                        #fff1f1 0, #fff1f1 14px, #ffe4e4 14px, #ffe4e4 28px);

    /* Выключенная кнопка */
    --c-off-ink:     #9aa8b8;
    --c-off-border:  #c3ccd6;
    --g-off:         linear-gradient(180deg, #f4f6f8, #dde3e9);

    /* Тени. Карточка админки в прототипе своя: девять вхождений с .55 и
       28px против одного с .6 и 24px у публичной (--sh-card). */
    --sh-card-adm:   0 0 0 5px rgba(255, 255, 255, .55), 0 12px 28px rgba(6, 40, 90, .3);
    --sh-adm-top:    0 3px 0 #064a85, 0 6px 16px rgba(0, 0, 0, .25);
    --sh-login:      0 0 0 6px rgba(255, 255, 255, .55), 0 20px 40px rgba(6, 40, 90, .4);

    /* Глянцевые кнопки: «подложка + сплошная тень снизу + мягкая». Для
       каждой темы своя, потому что сплошная тень — цвет её борта. */
    --sh-btn-gold:   inset 0 2px 0 rgba(255, 255, 255, .75), 0 5px 0 #8a3a00, 0 8px 14px rgba(0, 0, 0, .3);
    --sh-btn-sky:    inset 0 1px 0 rgba(255, 255, 255, .75), 0 4px 0 #064a85, 0 6px 10px rgba(0, 0, 0, .25);
    --sh-btn-chrome: inset 0 1px 0 #ffffff, 0 4px 0 #6b7c90, 0 6px 10px rgba(0, 0, 0, .2);
    --sh-btn-red:    inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #6d060b, 0 6px 10px rgba(0, 0, 0, .25);
    /* Та же кнопка нажата: сплошная тень сжимается в 1px */
    --sh-btn-gold-on:   inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #8a3a00;
    --sh-btn-sky-on:    0 1px 0 #064a85;
    --sh-btn-chrome-on: 0 1px 0 #6b7c90;
    --sh-btn-red-on:    0 1px 0 #6d060b;

    /* Контур текста на глянце: обводка тенями в цвет борта */
    --ts-gold:   0 2px 0 #8a3a00, 1px 0 0 #8a3a00, -1px 0 0 #8a3a00;
    --ts-sky:    0 1px 0 #064a85, 1px 0 0 #064a85, -1px 0 0 #064a85;
    --ts-red:    0 1px 0 #6d060b;
    --ts-ribbon: 0 2px 0 #064a85, 1px 0 0 #064a85, -1px 0 0 #064a85, 0 -1px 0 #064a85;

    /* -----------------------------------------------------------------
       Таблицы админки и экран пользователей (TASKS P5-3, P5-12).
       Значения — из админских экранов прототипа; имена по роли, а не по
       оттенку, поэтому --c-thead-ink существует отдельно от совпадающего
       по значению --c-card-border: это цвет текста шапки, а не рамки.
       ----------------------------------------------------------------- */

    /* Строки таблицы */
    --c-thead-ink:   #0b5fa3;   /* подписи столбцов на льду */
    --c-row-hover:   #f5fbff;   /* подсветка строки под курсором */

    /* Хром в два стопа: мелкие кнопки в строках и стрелки порядка. У
       крупного --g-chrome четыре стопа, и на кнопке высотой 26px жёсткий
       стык на 52 % превращается в полоску. */
    --g-chrome-soft: linear-gradient(180deg, #ffffff, #dfe7ef);

    /* Состояние «в меню / скрыта». Зелёный свой, темнее --c-success:
       на 13px жирным светлый зелёный на белом не добирает контраста. */
    --c-in-menu:     #1a8f33;

    /* Аватар-плитка: инициал на градиенте по роли */
    --g-avatar-admin:   linear-gradient(180deg, #8fe1ff, #0b72c2);
    --g-avatar-manager: linear-gradient(180deg, #d8c4ff, #7a3fc9);

    /* Карточки ролей в форме пользователя: фон выбранной и ободок
       невыбранной. Невыбранная остаётся белой (--c-surface). */
    --c-ring-idle:    #cfe3f3;
    --g-role-admin:   linear-gradient(180deg, #fff1f1, #ffd9da);
    --g-role-manager: linear-gradient(180deg, #f5efff, #e3d6ff);

    /* Памятка о ролях: та же штриховка 45°, что у экрана отказа, но в
       небесном. Стопы развёрнуты в классические (см. шапку файла). */
    --c-legend-ink:  #23446e;
    --tex-legend:    repeating-linear-gradient(45deg,
                        #eef8ff 0, #eef8ff 14px, #e2f3ff 14px, #e2f3ff 28px);

    /* -----------------------------------------------------------------
       Редактор страницы (TASKS P5-4, P5-8, P5-9). Значения — из экрана
       «Page editor» прототипа.
       ----------------------------------------------------------------- */

    /* Текст на небесном фоне полосы контента: крошки над редактором.
       Мягкая тень, не контур, — отдельно от --ts-sky. */
    --ts-crumb:       0 1px 2px #064a85;

    /* Контур заголовка в мини-превью баннера. Тот же цвет, которым
       обведён H1 на сайте (--c-outline-soft), но там это drop-shadow-ы
       на `background-clip:text`, а здесь обычный текст. */
    --ts-banner-title: 0 2px 0 #0a3a6e, 1px 0 0 #0a3a6e, -1px 0 0 #0a3a6e;

    /* Полоса тулбара. Это НЕ --g-chrome: стык на 52 % здесь темнее
       (#c9d6e3 против #b9c8d8) — полоса должна читаться как панель
       инструментов, а не как крупная кнопка. */
    --g-adm-bar:      linear-gradient(180deg, #ffffff 0%, #e3ebf3 45%, #c9d6e3 52%, #e3ebf3 100%);

    /* Группа кнопок внутри полосы: подложка и её контур */
    --c-tool-bg:      rgba(10, 42, 85, .06);
    --c-tool-border:  rgba(10, 42, 85, .12);

    /* Полоска под буквой «A» у кнопки палитры: пять первых системных
       цветов из PAGE_SYS_COLORS подряд. Кнопка должна читаться как «цвет
       текста» без подписи, и единственное, чем это показывается, —
       радуга. Значения продублированы с PHP намеренно: там это данные
       палитры, здесь — рисунок иконки, и меняться они могут врозь. */
    --g-tool-rainbow: linear-gradient(90deg, #e4262c, #e0600b, #1a8f33, #1f5fe0, #7a3fc9);

    /* Всплывающая панель тулбара (палитра, адрес ссылки). Тень глубже
       --sh-card-adm: панель висит ПОВЕРХ карточки, и оторваться от неё
       должна заметно. */
    --sh-pop:         0 12px 28px rgba(6, 40, 90, .35);

    /* Свотч палитры: контур поверх любого цвета плюс блик. Границей это
       сделать нельзя — рамка у свотча белая и отделяет его от соседа. */
    --sh-swatch:      0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .4);

    /* Белый ободок вокруг крупного поля и карточки редактора. Отдельно
       от --sh-card-adm: там он идёт в паре с большой тенью, а здесь
       нужен сам по себе. */
    --sh-ring-white:  0 0 0 5px rgba(255, 255, 255, .55);

    /* Режим «</> HTML»: сырая разметка на тёмном. Цвета свои, не
       --c-navy/--c-sky-pale по значению, а по РОЛИ: это фон и текст
       кодового поля, и менять их вместе с панелями сайта незачем. */
    --c-code-bg:      #0a2a55;
    --c-code-ink:     #8fe1ff;

    /* Тост «✓ Page saved»: двухстоповый зелёный глянец. Градиент светлее
       --c-success, которым красится «● In menu»: на плашке он фон, а не
       текст, и контраст считается для белых букв поверх. */
    --g-toast:        linear-gradient(180deg, #6be36b, #1fa83a);
    --ts-green:       0 1px 0 #0e6b22;
    --sh-toast:       0 8px 20px rgba(0, 0, 0, .3);

    /* -----------------------------------------------------------------
       Экран настроек (TASKS P5-11). Значения — из экрана «Settings»
       прототипа.
       ----------------------------------------------------------------- */

    /* Контур единственного <h1> в админке. Не --ts-ribbon: у него падающая
       тень 2px, а у заголовка экрана 3px — он крупнее риббона вдвое, и на
       34px двухпиксельная подложка теряется. */
    --ts-h1-adm:      0 3px 0 #064a85, 1px 0 0 #064a85, -1px 0 0 #064a85, 0 -1px 0 #064a85;

    /* Ряд с полями (ссылка сайдбара): ледяная подложка и её рамка. Значение
       рамки совпадает с --c-ring-idle, роль другая — это кромка ряда, а не
       ободок невыбранной карточки роли. */
    --c-set-row-bg:   #f3faff;
    --c-set-row-edge: #cfe3f3;

    /* Пунктирная кнопка «+ Add»: она не глянцевая намеренно — это не
       действие над сайтом, а добавление пустой строки в форму. */
    --c-add-bg:       #eef8ff;
    --c-add-bg-on:    #e0f2ff;

    /* Тумблер (maintenance, виджет Discord). Зелёный «включено» совпадает
       по значению с --g-toast, но роль другая: там плашка сообщения, здесь
       дорожка переключателя, и менять их вместе не за что. */
    --g-switch-on:    linear-gradient(180deg, #6be36b, #1fa83a);
    --g-switch-off:   linear-gradient(180deg, #dde3e9, #b9c8d8);
    --g-switch-knob:  linear-gradient(180deg, #ffffff, #c9d6e3);
    --c-switch-edge:  #1c2380;
}