/*
  Токены оформления. Это единственное место, где задаются цвета, шрифты, линии и радиусы.
  Смена фирменного стиля = замена значений в этом файле, разметку трогать не нужно.

  Визуальный язык: тёплый документ, а не рекламная страница.
  Носители стиля — тонкая линия и моноширинная подпись вразрядку, а не карточка с тенью.
  Иерархию несут ЦВЕТ чернил и капитель, а не жирный шрифт: жирного мало и он редкий.
*/

/* ---------- шрифты: только со своего сервера, внешние шрифтовые сети не используются ---------- */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/worksans-400.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/worksans-500.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/worksans-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jetbrainsmono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/jetbrainsmono-700.woff2") format("woff2"); }

/* Подменные шрифты с подогнанными метриками: пока woff2 летит по сети, текст
   рисуется системным, но занимает ту же площадь — подмена не двигает вёрстку. */
@font-face { font-family: "WS Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.02%; ascent-override: 106.23%; descent-override: 32.97%; line-gap-override: 0%; }
@font-face { font-family: "WS Fallback"; font-weight: 500; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.93%; ascent-override: 105.31%; descent-override: 32.69%; line-gap-override: 0%; }
@font-face { font-family: "WS Fallback"; font-weight: 700; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.05%; ascent-override: 103.23%; descent-override: 32.04%; line-gap-override: 0%; }
@font-face { font-family: "JB Fallback"; font-weight: 400; src: local("Consolas"), local("DejaVu Sans Mono"), local("Menlo");
  size-adjust: 109.13%; ascent-override: 93.47%; descent-override: 27.49%; line-gap-override: 0%; }

:root {
  /* ---------- палитра: тёплая нейтральная бумага + камель как единственный акцент ---------- */
  --bg:          #f7f7f7;   /* фон страницы: тёплый серый, не белый */
  --panel:       #ffffff;   /* поверхность блока */
  --panel-2:     #fcfbfa;   /* приглушённая поверхность: врезки, поля ввода, чётные полосы */
  --panel-warm:  linear-gradient(180deg, #fcf6ec, #f6edde);  /* выделенный блок */

  --ink-strong:  #1b1b1b;   /* заголовки и выделения внутри текста */
  --ink:         #2b2b2b;   /* корпус текста */
  --ink-dim:     #5c574f;   /* описания, вторичное */
  --ink-faint:   #707070;   /* кикеры, счётчики, служебное */

  --camel:       #a8794e;   /* акцент: метки, заливки, главная кнопка */
  --camel-deep:  #8a5e34;   /* акцент на тексте — контраст к белому ≥ 4.5:1 */
  --camel-tint:  #f6eee2;   /* подложка акцента */
  --cold:        #4e7aa8;   /* второй смысловой цвет: ссылки, спокойные бейджи */
  --cold-deep:   #3e6076;
  --cold-tint:   #eaf1f6;
  --alarm:       #a8503e;   /* перелом: результат ушёл в минус */
  --alarm-tint:  #f7ece9;

  --dark:        #121212;   /* тёмная плита: живая модель */
  --dark-2:      #151413;   /* ячейка внутри тёмной плиты */
  --dark-line:   #2a2724;   /* грань тёмной плиты */
  --dark-hair:   #262220;   /* разделитель внутри тёмной плиты */
  --dark-ink:    #f1ece5;
  --dark-dim:    #8e867e;
  --dark-warm:   #c79a6b;

  /* ---------- шкала линий: волосяная → тонкая → грань → смысловая метка ----------
     ступени разнесены прозрачностью, а не только толщиной: 1px при .30 читается
     заметно легче, чем 1px при .55. Толщину набирает только то, что несёт смысл. */
  --ln-hair: 1px;  --c-hair: rgba(185,185,185,.30);  /* разделители ВНУТРИ блока */
  --ln-thin: 1px;  --c-thin: rgba(185,185,185,.55);  /* рамки блоков и панелей */
  --ln-edge: 1px;  --c-edge: #b9b9b9;                /* грань органов управления */
  --ln-mark: 3px;                                    /* смысловая метка слева у блока */

  /* ---------- типографика ---------- */
  --sans: "Work Sans", "WS Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "JB Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --w-text: 400;    /* корпус */
  --w-mid: 500;     /* середина; всегда вместе с цветом --ink-strong */
  --w-accent: 700;  /* акцент: h1, заголовок блока — должен оставаться редким */
  --fs-body: 15px;
  --lh-body: 1.62;

  /* ---------- шаги отступов, сетка 4px ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;

  /* ---------- сетка ----------
     широкое полотно: страница живёт на плотной сетке, а не в узкой колонке */
  --wrap: 1560px;
  --wrap-narrow: 900px;   /* служебные страницы: длинный текст читается в колонке */
  --pad: 20px;
  --section-y: 40px;
  --header-h: 52px;
  --band: var(--bg);      /* фон текущей полосы; кружки на рельсе пробивают линию им */

  /* ---------- форма ---------- */
  --radius: 12px;
  --radius-sm: 9px;
  /* теней почти нет: отделение держат линия и фон, а не подъём над бумагой */
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.035);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.05);

  /* ---------- ПРИБОРНАЯ ПАНЕЛЬ: под-язык самой симуляции ----------
     Страница — тёплый документ. Прибор внутри неё — пульт: тонкая рамка у каждого
     блока, весь служебный текст моноширинный капителью вразрядку, числа крупные.
     Гамма панели та же тёплая, поэтому прибор не выглядит вклеенным из чужого макета.
     Цвета кластеров различают СМЫСЛОВЫЕ группы и больше ничего не значат. */
  --pan-bg:    #f7f5ee;   /* стол прибора */
  --pan-face:  #fffdf8;   /* лицо блока */
  --pan-edge:  rgba(43,40,35,.55);   /* рамка блока */
  --pan-hair:  rgba(43,40,35,.16);   /* разделитель внутри блока */
  --pan-ink:   #221f1a;
  --pan-dim:   #6f6a62;
  --k-warm:    #a8794e;   /* кластер 1: деньги, главное */
  --k-cold:    #3b6fd4;   /* кластер 2: объём, спрос */
  --k-teal:    #2e8f84;   /* кластер 3: то, что остаётся */
  --k-alarm:   #c1543c;   /* кластер 4: потеря */

  /* серии графиков разборов (/case/): базовая гамма — различима на светлом,
     скины перекрывают эти переменные своей палитрой */
  --w1: #b23a78;
  --w2: #5352c0;
  --w3: #b07a1e;
  --w4: #1f8a70;
  --w5: #8a5a9e;

  /* ---------- движение: подтверждение действия, не украшение ---------- */
  --dur-1: 120ms; --dur-2: 180ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* ---------- совместимость: имена, на которые ссылается скрипт формы ---------- */
  --muted: var(--ink-faint);
  --ok:    #4a7a52;
  --bad:   var(--alarm);
  --accent: var(--camel);
  --line:  var(--c-thin);
}

@media (min-width: 900px) {
  :root {
    --fs-body: 15.5px;
    --pad: 36px;
    --section-y: 64px;
    --header-h: 60px;
  }
}