:root {
  --primary-color:  #222D52;
  --success-color:  #10b981;
  --danger-color:   #ef4444;
  --warning-color:  #D2B68A;
  --info-color:     #222D52;
  --dark-color:     #000000;
  --light-color:    #EEE5D9;
  --border-color:   #EEE5D9;
  /* Variant-B aliases */
  --navy:  #222D52;
  --gold:  #D2B68A;
  --cream: #EEE5D9;
  --white: #FDFFFF;
}

/* ── СЕМАНТИЧЕСКИЕ ТОКЕНЫ ПОВЕРХНОСТЕЙ ────────────────
   Фирменные переменные выше (--navy, --gold, --cream) описывают ПАЛИТРУ.
   Эти описывают РОЛЬ: что здесь фон, что текст, что граница. Роль может
   менять значение вместе с темой, палитра — нет.

   Отдельный --brand-ink нужен потому, что navy используется двояко: как
   поверхность (шапка, кнопки) и как цвет текста. На тёмном фоне navy-текст
   исчезает, а navy-поверхность остаётся уместной. */
:root {
  --surface:        #FDFFFF;   /* основной фон страниц и карточек */
  --surface-sunk:   #F5F3EF;   /* утопленный фон: шапки таблиц, полосы, треки */
  --surface-accent: #EEE5D9;   /* акцентная плашка: блок фильтров */
  --text:           #171A24;
  --text-muted:     #5A5F6A;
  --border:         #E2D9C8;
  --border-subtle:  #F0ECE6;
  --brand-ink:      #222D52;   /* бренд как ЦВЕТ ТЕКСТА, не как поверхность */
  --navy-hover:     #1A2340;   /* нажатое состояние фирменной кнопки */
  --link:           #0A58CA;   /* дефолтный #0d6efd даёт на белом 4.48 — недобор */
  --code-ink:       #B02566;   /* дефолтный #d63384 даёт ровно 4.48 — тоже недобор */
  --text-up:        #047857;   /* рост: на белом было 2.53 */
  --text-down:      #B91C1C;   /* падение: на белом было 3.75 */
  --shadow:         rgba(34, 45, 82, .07);
  --highlight:      #FFF8DB;   /* подсветка строки «в избранном» */
  --control-surface: #5A5F6A;  /* серые кнопки-действия */

  /* Текст и плашки НА ФИРМЕННОЙ СИНЕЙ поверхности: полоса бренда и панель
     разделов в широкой раскладке. Значение одно на обе темы — сама
     поверхность в тёмной теме не меняется, меняться нечему. */
  --on-navy:        #EEE5D9;   /* основной текст на navy (кремовый) */
  --on-navy-muted:  #BFC6D9;   /* приглушённый: 7,4:1 на navy */
  --navy-raise:     #2C3A66;   /* плашка на navy: значок, наведение */
  --navy-line:      #35406B;   /* разделитель на navy */

  /* Акцентные плашки справки: информация и предупреждение. Это не оттенки
     серого, а собственный смысл, поэтому у них свои токены. */
  --info-surface:   #EFF6FF;
  --info-border:    #BFDBFE;
  --info-ink:       #1E40AF;
  --warn-surface:   #FFFBEB;
  --warn-border:    #FDE68A;
  --warn-ink:       #92400E;
}

/* ── ПАЛИТРА МАКЕТА 18.09 — только страницы нового слоя ─────────────────
   Класс app-layer стоит на <html> восьми страниц нового слоя. Легаси на
   Bootstrap его не несёт и остаётся в прежних цветах (решение 5 плана).
   Роли те же, что в :root, — app.css их уже читает; добавлены пары
   фон/чернила, которых раньше не было.

   Исключение — .app-nav: нижнюю панель ставит shell.js на ЛЮБОЙ странице,
   легаси включая, и это один узел навигации нового слоя, а не содержимое
   Bootstrap-страницы — ему положено выглядеть одинаково везде (иначе
   получается третий, ничей вид). Поэтому селектор берёт и её: панель сама
   несёт токены макета, а не наследует их через class на <html>. */
html.app-layer, .app-nav {
  --navy: #16203A;  --gold: #C9A96A;
  --super-surface: #16203A; --super-ink: #F0E4C9;
  /* --surface-sunk — свой тон, не фон страницы: иначе врезка (.app-note) и
     пустое состояние на странице видны только по тонкой рамке. #F0E9DA —
     тон нажатой кремовой кнопки макета (м:547). */
  --surface: #F7F3E9;  --surface-card: #FFFFFF;  --surface-sunk: #F0E9DA;
  --surface-row: #FCFAF5;  --surface-accent: #F0EAD9;  --gold-soft: #F0E4C9;
  /* Второй, бледный оттенок приглушённого текста (время, подписи разделов,
     значения строк, плейсхолдер). В макете #8A7B5F, но на кремовом фоне это
     3,7:1 — ниже AA; #7B6E55 — тот же тон, затемнённый до 4,5:1 на --surface. */
  --text: #16203A;  --text-soft: #3C3A31;  --text-muted: #6E6754;  --text-faint: #7B6E55;
  --brand-ink: #16203A;  --link: #7A5C1E;
  --border: #E2D9C6;  --border-subtle: #E7DFCC;  --dashed: #D8CBAF;  --nav-idle: #CFC5AE;
  --up-surface: #E9F0EC;  --up-ink: #2E5A4B;  --up-border: #CFE0D7;
  --down-surface: #F6DFDB;  --down-surface-soft: #FBF3F2;  --down-ink: #8E3F35;  --down-border: #E8CFCB;
  --danger: #C4584C;  --warn-ink: #7A5C1E;
  --text-up: #2E5A4B;  --text-down: #8E3F35;  --highlight: #F0E4C9;
  /* --on-navy-body — текст абзаца на тёмной карточке «Ваш доступ» (м:1302),
     мягче основного --on-navy, но светлее приглушённого. */
  /* Полотно логотипа (записка 21.09): знак несёт собственную подложку
     #02091B, и заставка с иконкой стоят на ней же. Тон один в обеих темах —
     это цвет самого знака, а не поверхность интерфейса. */
  --brand-canvas: #02091B;  --on-brand-canvas: #F2EDE3;  --on-brand-canvas-muted: #A79D88;
  --on-navy: #F2EDE3;  --on-navy-body: #DDD8CB;  --on-navy-muted: #B9C0D0;  --on-navy-soft: #8E9AB4;  --on-navy-faint: #8A90A2;
  --on-navy-up: #9FD3B8;  --navy-icon: #3C4358;  --navy-active: rgba(240, 228, 201, .16);
  --navy-line: rgba(201, 169, 106, .3);
  --shadow: rgba(22, 32, 58, .06);
}

/* Палитра сигналов темы не имеет: каждый бейдж несёт и фон, и чернила, и
   потому одинаково читается на любой поверхности. Меняются только роли. */

  :root[data-bs-theme="dark"] {
    --surface:        #12141B;
    --surface-sunk:   #1A1D26;
    --surface-accent: #242835;
    --text:           #EDE8DC;
    --text-muted:     #A7A294;
    --border:         #2F3342;
    --border-subtle:  #262A36;
    --brand-ink:      #93A1DC;
    --text-up:        #6FB88A;
    --text-down:      #E08A7E;
    --shadow:         rgba(0, 0, 0, .5);
    --highlight:      #3A3520;
    --link:           #8AB4F8;
    --code-ink:       #F08FC0;
    --control-surface: #3A3F4A;
    --info-surface:   #16233A;
    --info-border:    #2A4470;
    --info-ink:       #A8C7FA;
    --warn-surface:   #2A2214;
    --warn-border:    #5C4A1E;
    --warn-ink:       #F2CC7A;
  }

  /* Тёмные пары нового слоя (решение 4: тёмную тему оставить). Синие
     поверхности (--navy, --on-navy-*) темы не имеют — у них свой фон.
     .app-nav — тот же общий узел, что в светлом блоке выше. */
  html.app-layer[data-bs-theme="dark"], [data-bs-theme="dark"] .app-nav {
    --surface: #12141B;  --surface-card: #1A1D26;  --surface-sunk: #20242F;
    --super-surface: #E4CB9B; --super-ink: #16203A;
    --surface-row: #1A1D26;  --surface-accent: #262A36;  --gold-soft: #3A3120;
    --text: #EDE8DC;  --text-soft: #D5CFC2;  --text-muted: #A7A294;  --text-faint: #928B7C;
    --brand-ink: #E4CB9B;  --link: #D9B877;
    --border: #2F3342;  --border-subtle: #262A36;  --dashed: #4A4636;  --nav-idle: #5C5A52;
    --up-surface: #1C2E27;  --up-ink: #9FD3B8;  --up-border: #2E4A3F;
    --down-surface: #3A2220;  --down-surface-soft: #2E1C1A;  --down-ink: #F0A89C;  --down-border: #5A3230;
    --danger: #E08A7E;  --warn-ink: #E4CB9B;
    --text-up: #9FD3B8;  --text-down: #F0A89C;  --highlight: #3A3120;
    --shadow: rgba(0, 0, 0, .5);
  }

/* Без JavaScript продолжаем следовать теме устройства. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --surface:        #12141B;
    --surface-sunk:   #1A1D26;
    --surface-accent: #242835;
    --text:           #EDE8DC;
    --text-muted:     #A7A294;
    --border:         #2F3342;
    --border-subtle:  #262A36;
    --brand-ink:      #93A1DC;
    --text-up:        #6FB88A;
    --text-down:      #E08A7E;
    --shadow:         rgba(0, 0, 0, .5);
    --highlight:      #3A3520;
    --link:           #8AB4F8;
    --code-ink:       #F08FC0;
    --control-surface: #3A3F4A;
    --info-surface:   #16233A;
    --info-border:    #2A4470;
    --info-ink:       #A8C7FA;
    --warn-surface:   #2A2214;
    --warn-border:    #5C4A1E;
    --warn-ink:       #F2CC7A;
  }

  /* Тёмные пары нового слоя (решение 4: тёмную тему оставить). Синие
     поверхности (--navy, --on-navy-*) темы не имеют — у них свой фон.
     .app-nav — тот же общий узел, что в светлом блоке выше. */
  html.app-layer:not([data-bs-theme]), html:not([data-bs-theme]) .app-nav {
    --surface: #12141B;  --surface-card: #1A1D26;  --surface-sunk: #20242F;
    --super-surface: #E4CB9B; --super-ink: #16203A;
    --surface-row: #1A1D26;  --surface-accent: #262A36;  --gold-soft: #3A3120;
    --text: #EDE8DC;  --text-soft: #D5CFC2;  --text-muted: #A7A294;  --text-faint: #928B7C;
    --brand-ink: #E4CB9B;  --link: #D9B877;
    --border: #2F3342;  --border-subtle: #262A36;  --dashed: #4A4636;  --nav-idle: #5C5A52;
    --up-surface: #1C2E27;  --up-ink: #9FD3B8;  --up-border: #2E4A3F;
    --down-surface: #3A2220;  --down-surface-soft: #2E1C1A;  --down-ink: #F0A89C;  --down-border: #5A3230;
    --danger: #E08A7E;  --warn-ink: #E4CB9B;
    --text-up: #9FD3B8;  --text-down: #F0A89C;  --highlight: #3A3120;
    --shadow: rgba(0, 0, 0, .5);
  }
}

/* Шкалы. Значения вне этих списков в app.css запрещены и ловятся тестом. */
:root {
  --fs-tag: 10px;      --lh-tag: 1.2;       /* моноподписи разделов, шапка таблицы */
  --fs-key: 10.5px;    --lh-key: 1.25;      /* ключ плитки */
  --fs-micro: 11px;    --lh-micro: 1.2;     /* плашки */
  --fs-nav: 11.5px;    --lh-nav: 1.2;       /* подпись пункта панели */
  --fs-small: 12px;    --lh-small: 1.4;
  --fs-note: 12.5px;   --lh-note: 1.45;     /* название бумаги, примечания */
  --fs-caption: 13px;  --lh-caption: 1.4;
  --fs-label: 14px;    --lh-label: 1.35;
  --fs-row: 15px;      --lh-row: 1.35;      /* заголовок карточки, значение плитки */
  --fs-body: 16px;     --lh-body: 1.45;     /* поля ввода — не мельче */
  --fs-lead: 17px;     --lh-lead: 1.3;      /* заголовок листа, рекомендация */
  --fs-sub: 18px;      --lh-sub: 1.3;
  --fs-num: 19px;      --lh-num: 1.2;       /* цены в тёмном блоке */
  --fs-title: 20px;    --lh-title: 1.25;
  --fs-head: 22px;     --lh-head: 1.2;      /* тикер карточки, заголовок раздела десктопа */
  --fs-display: 30px;  --lh-display: 1.1;   /* сумма портфеля на телефоне */
  --fs-hero: 32px;     --lh-hero: 1.1;      /* сумма портфеля на десктопе */

  --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Движение. Три длительности на весь слой: отклик на нажатие, раскрытие
     строки, выезд листа. Кривая одна — быстрый старт, мягкая остановка, как
     у системных переходов. Всё это гасит prefers-reduced-motion в base.css. */
  --dur-tap: 120ms;
  --dur-open: 220ms;
  --dur-sheet: 280ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);

  --r-tag: 5px; --r-control: 8px; --r-row: 9px; --r-block: 10px; --r-box: 11px;
  --r-card: 12px; --r-sheet: 16px; --r-pill: 999px;

  /* Нижний предел цели касания. Меньше — палец промахивается. */
  --touch: 44px;
}