/* PF-BRAND-v1 — фирменный слой FORSAL.
 *
 * ЕДИНСТВЕННОЕ место, где живут бренд-цвета. Всё остальное оформление берёт их
 * через токены --pf-* из pf.css. Сменить фирменный стиль = переписать этот файл.
 *
 * Источник: docs/brand/forsal/ (дизайн-система, передана 2026-09-05); цвета и логотип
 * с 2026-09-26 — по брендбуку 2020, стр. 4 (скилл .claude/skills/forsal-design/). Прежние
 * #00FF31 / #CDFCDE / #0400EF были цветами выгрузки из Illustrator, а не брендбука.
 * Она сделана под презентации (16 макетов, кегль 96 px, поля 132 px), поэтому
 * переносится не буквально, а по её же правилам сочетания — они как раз
 * предписывают сдержанность:
 *
 *   «Forsal Green только как акцент — кольцо буквы O, маркеры списка, числа»
 *   «НЕЛЬЗЯ использовать зелёный для больших заливок»
 *   «Graphite #3C3C3C для основного текста на белом»
 *   «Mint Tint #E8FEF0 как фон карточек на белом слайде»
 *
 * Политика владельца (2026-09-05): палитра яркая и утомляет глаз на рабочих
 * экранах → бренд входит акцентом (ссылки, кнопки, активные пункты), логотипом
 * и подсветкой, а холст и таблицы остаются нейтральными.
 *
 * Контраст проверен на каждом применении (WCAG AA = 4.5:1 для текста):
 *   Forsal Blue #0200E7 на белом      9.74   ✓ ссылки, кнопки, активные пункты
 *   белый на Forsal Blue              9.74   ✓ текст на кнопке
 *   Deep Blue  #000096 на белом      14.58   ✓ ховер/нажатие
 *   Graphite   #3C3C3C на белом      11.03   ✓ основной текст
 *   Mint Tint  #E8FEF0 как фон        —      ✓ на нём читаемо всё (≥ 4.5)
 *   Forsal Green #00FF59 на белом     1.36   ✗ ТЕКСТОМ НЕ ИСПОЛЬЗУЕТСЯ НИКОГДА
 *   Forsal Green на Forsal Blue       7.16   ✓ только на синем — как в ДС
 */

:root {
    /* ---- Фирменная палитра как есть (семь цветов темы) ---- */
    --pf-brand-blue:        #0200e7;
    --pf-brand-blue-deep:   #000096;
    --pf-brand-green:       #00ff59;   /* брендбук, стр. 4 */
    --pf-brand-green-pale:  #d9fce2;   /* мятный брендбука, стр. 4 */
    --pf-brand-mint:        #e8fef0;   /* производный светлый мятный для подсветки, не цвет брендбука */
    --pf-brand-graphite:    #3c3c3c;

    /* ---- Подключение к платформенным токенам ---- */
    --pf-accent:       var(--pf-brand-blue);
    --pf-accent-rgb:   2, 0, 231;
    --pf-accent-hover: var(--pf-brand-blue-deep);
    /* мягкая подсветка (ховер строки, активный фильтр) — мятная из ДС,
       а не разбавленный синий: «Mint Tint как фон карточек» */
    --pf-accent-soft:  var(--pf-brand-mint);

    /* Основной текст — фирменный графит вместо нейтрального слейта */
    --pf-text: var(--pf-brand-graphite);

    /* ---- Логотип ----
       Два варианта: на светлом фоне — синие буквы, на тёмном — белые.
       Вектор из исходников брендбука (= forsal-design/assets/logo/), обрезан по
       знаку, фон прозрачный. Старые PNG оставлены для закэшированного brand.css. */
    --pf-logo-on-light: url("/platform/brand/logo-on-light.svg");
    --pf-logo-on-dark:  url("/platform/brand/logo-on-dark.svg");
    --pf-logo-ratio: 8.45;          /* 679.6 × 80.4 */
}

/* Зелёный — только акцент и только там, где под ним синий или белый фон
   и он НЕ несёт смысла в одиночку (правило ДС + требование доступности). */
.pf-brand-accent { color: var(--pf-brand-green); }        /* допустимо на синем фоне */
.pf-brand-rule {                                          /* тонкая акцентная линия */
    border: 0; height: 3px; width: 44px; margin: 0 0 var(--pf-space-3);
    background: var(--pf-brand-green); border-radius: var(--pf-radius-pill);
}

/* Логотип: <span class="pf-logo" role="img" aria-label="FORSAL"></span> */
.pf-logo {
    display: inline-block;
    height: var(--pf-logo-h, 22px);
    aspect-ratio: var(--pf-logo-ratio);
    background: var(--pf-logo-on-light) center / contain no-repeat;
}
.pf-logo.-on-dark { background-image: var(--pf-logo-on-dark); }

/* Плашка раздела в фирменных цветах: синий фон + белый заголовок + зелёный
   подзаголовок — эталонное сочетание из дизайн-системы. */
.pf-brand-band {
    background: var(--pf-brand-blue);
    color: #fff;
    border-radius: var(--pf-radius-lg);
    padding: var(--pf-space-4) var(--pf-space-5);
}
.pf-brand-band .pf-brand-band-sub { color: var(--pf-brand-green); }
.pf-brand-band a { color: #fff; text-decoration: underline; }