/* ===========================================================================
   «Маркетолог Плюс» — дизайн-токены

   Единственный источник цвета, размеров и типографики для всех экранов.
   Кабинет и демонстрация подключают этот файл, поэтому правка здесь меняет
   вид везде разом — а не в трёх местах по-разному.

   Правило работы: в разметке используются только переменные отсюда.
   Появился цвет, которого нет в токенах, — сначала заводим токен.

   Контраст каждой пары «текст на фоне» посчитан по WCAG и проходит 4.5:1
   для обычного текста, 3:1 для крупного и для границ смысловых блоков.
   Числа — в комментариях рядом со значением: если правите цвет, пересчитайте.
   =========================================================================== */

:root {
  /* =========================================================================
     ТЁМНАЯ ПАЛИТРА — объявлена здесь один раз, применяется ниже двумя
     способами: по системной настройке и по ручному переключателю. Так
     значение живёт в одном месте, а не переписывается в трёх блоках.
     ========================================================================= */
  --d-bg:              #121227;
  --d-surface:         #1B1B33;
  --d-surface-sunken:  #232242;
  --d-surface-hover:   #262547;

  /* Прожектор в тёмной теме выворачивается в СВЕТЛУЮ сторону — см. объяснение
     ниже, у --spotlight. 13.67:1 к поверхности. */
  --d-spotlight:       #E8E6F8;
  --d-spotlight-ink:   #16162A;   /* 14.47:1 на заливке */
  --d-spotlight-muted: #4A4863;   /* 7.13:1  */
  /* Смысловые цвета на прожекторе выворачиваются вместе с заливкой:
     в тёмной теме она светлая, поэтому нужны тёмные оттенки. */
  --d-spotlight-good:  #0A7256;   /* 4.81:1 на светлой заливке */
  --d-spotlight-alert: #A81F26;   /* 5.92:1 */

  --d-ink:             #F0EFFA;   /* 14.73:1 на поверхности */
  --d-ink-body:        #C6C4DE;   /* 9.87:1  */
  --d-ink-muted:       #A5A2C6;   /* 6.86:1  */
  --d-ink-faint:       #918FB8;   /* 5.45:1  */

  --d-line:            #2C2B4E;
  --d-line-strong:     #3B3A63;

  --d-accent:          #8C7CFF;   /* 5.15:1 на поверхности */
  --d-accent-hover:    #9C8DFF;
  --d-accent-soft:     #262452;
  --d-accent-ink:      #12112A;
  --d-accent-on-soft:  #B0A3FF;

  --d-good:            #3ECFA3;
  --d-good-soft:       #14322A;
  --d-good-ink:        #4FDCB0;   /* 8.03:1 на подложке */
  --d-warn:            #E9A94A;
  --d-warn-soft:       #33270F;
  --d-warn-ink:        #F0B45E;   /* 7.93:1 */
  --d-alert:           #F0666C;
  --d-alert-soft:      #351619;
  --d-alert-ink:       #F4787E;   /* 6.12:1 */
  --d-neutral-soft:    #242342;

  --d-series-1:        #8C7CFF;
  --d-series-2:        #3ECFA3;
  --d-series-3:        #F0A868;
  --d-series-4:        #B0A3FF;
  --d-series-5:        #6FBCF0;
  --d-series-base:     #3B3A63;

  --d-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --d-shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --d-shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .6);

  /* =========================================================================
     СВЕТЛАЯ ПАЛИТРА — она же основная, направление задано ею.
     ========================================================================= */

  /* --- Основа -----------------------------------------------------------
     Лавандовый фон, а не серый: интерфейс про деньги, и холодная сталь
     делала его тревожным. Светлая база с фиолетовым подтоном спокойнее и
     даёт белым карточкам «приподняться» без тяжёлых теней. */
  --bg:              #EFECFD;
  --surface:         #FFFFFF;
  --surface-sunken:  #F7F6FE;   /* вложенные блоки внутри карточки */
  --surface-hover:   #F4F2FE;

  /* --- Прожектор ---------------------------------------------------------
     Сигнатура интерфейса: карточка, ВЫВЕРНУТАЯ относительно остальных.
     Ею помечается то, что требует внимания прямо сейчас.

     Важно: приём — это не «тёмный цвет», а инверсия. В светлой теме выворот
     идёт в тёмную сторону (17.76:1 к белой карточке), в тёмной — в светлую
     (13.67:1). Попытка оставить тёмную заливку в тёмной теме давала 1.24:1:
     карточка переставала отличаться от соседей, и сигнатура исчезала.

     Работает, только пока такая карточка на экране ОДНА. */
  --spotlight:       #16162A;
  --spotlight-ink:   #FFFFFF;   /* 17.76:1 на заливке */
  --spotlight-muted: #A9A7C4;   /* 7.62:1  */
  /* Прирост и падение на прожекторе. Цвет обязан выворачиваться вместе
     с заливкой: на тёмной нужен светлый оттенок, на светлой — тёмный.
     Подмешивание цвета карточки этого не даёт и садится до 2.78:1. */
  --spotlight-good:  #4FDCB0;   /* 10.32:1 на тёмной заливке */
  --spotlight-alert: #F4787E;   /* 6.63:1 */

  /* --- Текст -------------------------------------------------------------
     Каждое значение подобрано по контрасту на всех трёх поверхностях,
     где оно реально встречается: белой карточке, утопленном блоке и фоне. */
  --ink:             #16162A;   /* 17.76:1 на белом */
  --ink-body:        #4A4863;   /* 8.76:1  */
  --ink-muted:       #605E7D;   /* 6.19:1 на белом, 5.33:1 на фоне */
  --ink-faint:       #67658B;   /* 5.51:1 на белом, 4.75:1 на фоне */

  /* --- Линии ------------------------------------------------------------- */
  --line:            #E7E4F7;
  --line-strong:     #D5D0F0;

  /* --- Акцент -------------------------------------------------------------
     Два токена для текста: на белом и на собственной светлой подложке.
     Один и тот же фиолетовый не может пройти контраст в обоих случаях. */
  --accent:          #5B4CE6;   /* 5.80:1 на белом */
  --accent-hover:    #4B3DD6;
  --accent-soft:     #EEEBFE;
  --accent-ink:      #FFFFFF;   /* 5.80:1 на заливке кнопки */
  --accent-on-soft:  #4A3BD4;   /* 6.26:1 на --accent-soft */

  /* --- Смысловые цвета ----------------------------------------------------
     Отделены от акцента намеренно: «хорошо» и «фирменный цвет» — разные
     сообщения, и путать их нельзя.

     У каждого по три токена: заливка, подложка и ОТДЕЛЬНЫЙ цвет текста.
     Насыщенный цвет на своей же светлой подложке даёт 2.8–3.7:1 — читать
     тяжело, а пилюлями подписаны приговоры вроде «дороже предела». */
  --good:            #12A47C;
  --good-soft:       #E2F6F0;
  --good-ink:        #0A7256;   /* 5.25:1 на подложке */
  --warn:            #C97A16;
  --warn-soft:       #FDF0DC;
  --warn-ink:        #8A5200;   /* 5.68:1 */
  --alert:           #D93F45;
  --alert-soft:      #FDE7E8;
  --alert-ink:       #A81F26;   /* 6.15:1 */
  --neutral-soft:    #F0EEF9;

  /* Цвета рядов на графиках и полосах. Не смысловые: просто различать
     соседние величины. --series-base — нейтральная заливка для фоновых
     столбцов (прошлые периоды, основание водопада). */
  --series-1:        #5B4CE6;
  --series-2:        #12A47C;
  --series-3:        #E8944A;
  --series-4:        #8B7BF0;
  --series-5:        #4AA3E8;
  --series-base:     #D5D0F0;

  /* --- Скругления ---------------------------------------------------------
     Мягкие: интерфейс должен выглядеть спокойным. Шкала короткая, чтобы
     не расползалась. */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;   /* внешняя оболочка приложения */
  --r-pill: 999px;

  /* --- Тени ---------------------------------------------------------------
     С лавандовым подтоном, а не серые: серая тень на цветном фоне выглядит
     грязью. Три ступени — больше не нужно. */
  --shadow-sm: 0 1px 2px rgba(38, 30, 90, .05);
  --shadow-md: 0 2px 4px rgba(38, 30, 90, .04), 0 8px 20px -8px rgba(38, 30, 90, .10);
  --shadow-lg: 0 4px 8px rgba(38, 30, 90, .05), 0 24px 48px -16px rgba(38, 30, 90, .18);

  /* --- Отступы ------------------------------------------------------------
     Шаг 4px. Именованные, чтобы в разметке не появлялись случайные 13px. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* --- Размеры каркаса ----------------------------------------------------
     Ширины, которые повторяются на обоих экранах. Без них каждый файл
     заводил свои, и колонки расходились на пару пикселей. */
  --w-rail:        244px;   /* боковая навигация */
  --w-card:        400px;   /* карточка входа */
  --w-table-min:   840px;   /* ниже таблица прокручивается, а не сжимается */
  --w-chart-min:   460px;
  --w-text:        72ch;    /* предел строки текста для чтения */

  /* --- Значки -------------------------------------------------------------
     Три размера: в навигации, рядом с текстом и в цветном квадрате. */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-box: 30px;

  /* --- Шрифты -------------------------------------------------------------
     Только системные. Внешние загрузки на сервере не пройдут, а тихий
     откат на шрифт по умолчанию хуже осознанного системного стека:
     на Windows это Segoe UI Variable, на macOS — San Francisco.

     Числа и подписи набираются тем же семейством, но разным весом —
     разнобой семейств в панели с цифрами читается как небрежность. */
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
          -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, monospace;

  --t-hero:   30px;   /* показатель в карточке */
  --t-xl:     22px;
  --t-lg:     18px;
  --t-md:     15px;   /* основной текст */
  --t-sm:     13.5px;
  --t-xs:     12px;
  --t-label:  11px;   /* надзаголовки в верхнем регистре */

  --lh-tight: 1.15;
  --lh-body:  1.55;

  /* --- Движение -----------------------------------------------------------
     Быстро и незаметно. Интерфейс, за которым следят каждый день, не
     должен привлекать к себе внимание анимацией. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: .14s;
  --slow: .24s;

  color-scheme: light;
}

/* ===========================================================================
   ПРИМЕНЕНИЕ ТЁМНОЙ ПАЛИТРЫ

   Два входа, один список значений: системная настройка и ручной
   переключатель. `:not([data-theme="light"])` нужен, чтобы ручной выбор
   светлой темы побеждал системную тёмную.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --surface-sunken: var(--d-surface-sunken);
    --surface-hover: var(--d-surface-hover);
    --spotlight: var(--d-spotlight);
    --spotlight-ink: var(--d-spotlight-ink);
    --spotlight-muted: var(--d-spotlight-muted);
  --spotlight-good: var(--d-spotlight-good);
  --spotlight-alert: var(--d-spotlight-alert);
    --spotlight-good: var(--d-spotlight-good);
    --spotlight-alert: var(--d-spotlight-alert);
    --ink: var(--d-ink);
    --ink-body: var(--d-ink-body);
    --ink-muted: var(--d-ink-muted);
    --ink-faint: var(--d-ink-faint);
    --line: var(--d-line);
    --line-strong: var(--d-line-strong);
    --accent: var(--d-accent);
    --accent-hover: var(--d-accent-hover);
    --accent-soft: var(--d-accent-soft);
    --accent-ink: var(--d-accent-ink);
    --accent-on-soft: var(--d-accent-on-soft);
    --good: var(--d-good);
    --good-soft: var(--d-good-soft);
    --good-ink: var(--d-good-ink);
    --warn: var(--d-warn);
    --warn-soft: var(--d-warn-soft);
    --warn-ink: var(--d-warn-ink);
    --alert: var(--d-alert);
    --alert-soft: var(--d-alert-soft);
    --alert-ink: var(--d-alert-ink);
    --neutral-soft: var(--d-neutral-soft);
    --series-1: var(--d-series-1);
    --series-2: var(--d-series-2);
    --series-3: var(--d-series-3);
    --series-4: var(--d-series-4);
    --series-5: var(--d-series-5);
    --series-base: var(--d-series-base);
    --shadow-sm: var(--d-shadow-sm);
    --shadow-md: var(--d-shadow-md);
    --shadow-lg: var(--d-shadow-lg);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --surface-sunken: var(--d-surface-sunken);
  --surface-hover: var(--d-surface-hover);
  --spotlight: var(--d-spotlight);
  --spotlight-ink: var(--d-spotlight-ink);
  --spotlight-muted: var(--d-spotlight-muted);
  --ink: var(--d-ink);
  --ink-body: var(--d-ink-body);
  --ink-muted: var(--d-ink-muted);
  --ink-faint: var(--d-ink-faint);
  --line: var(--d-line);
  --line-strong: var(--d-line-strong);
  --accent: var(--d-accent);
  --accent-hover: var(--d-accent-hover);
  --accent-soft: var(--d-accent-soft);
  --accent-ink: var(--d-accent-ink);
  --accent-on-soft: var(--d-accent-on-soft);
  --good: var(--d-good);
  --good-soft: var(--d-good-soft);
  --good-ink: var(--d-good-ink);
  --warn: var(--d-warn);
  --warn-soft: var(--d-warn-soft);
  --warn-ink: var(--d-warn-ink);
  --alert: var(--d-alert);
  --alert-soft: var(--d-alert-soft);
  --alert-ink: var(--d-alert-ink);
  --neutral-soft: var(--d-neutral-soft);
  --series-1: var(--d-series-1);
  --series-2: var(--d-series-2);
  --series-3: var(--d-series-3);
  --series-4: var(--d-series-4);
  --series-5: var(--d-series-5);
  --series-base: var(--d-series-base);
  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
  color-scheme: dark;
}

/* ===========================================================================
   ПРИМИТИВЫ. Готовые классы для того, что повторяется на каждом экране.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Числа в колонках должны стоять ровно, иначе таблица выглядит дрожащей */
.num { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--ink); }
h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--t-lg); font-weight: 600; }
h3 { font-size: var(--t-md); font-weight: 600; }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Для экранного диктора, но не на экране. Живые области и подписи к
   значкам без этого класса пришлось бы прятать вручную в каждом файле. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Карточка ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.card--raised { box-shadow: var(--shadow-md); }

/* Сигнатура: карточка, вывернутая относительно остальных. Работает, только
   пока она на экране одна. */
.card--spotlight {
  background: var(--spotlight);
  color: var(--spotlight-ink);
}
.card--spotlight .card-label { color: var(--spotlight-muted); }
.card--spotlight .stat-value { color: var(--spotlight-ink); }
.card--spotlight .stat-foot  { color: var(--spotlight-muted); }

/* --- Подпись раздела ----------------------------------------------------- */
.eyebrow {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- Показатель ---------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--s-2); }
.card-label { font-size: var(--t-xs); color: var(--ink-muted); }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: var(--t-lg); color: var(--ink-muted); margin-left: 2px; }
.stat-foot { font-size: var(--t-xs); color: var(--ink-muted); }

/* --- Пилюля состояния ----------------------------------------------------
   Цвет текста — отдельный токен, а не сам смысловой цвет: насыщенный на
   своей же подложке даёт 2.8–3.7:1, а пилюлями подписаны приговоры. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.pill--good    { background: var(--good-soft);    color: var(--good-ink); }
.pill--warn    { background: var(--warn-soft);    color: var(--warn-ink); }
.pill--alert   { background: var(--alert-soft);   color: var(--alert-ink); }
.pill--accent  { background: var(--accent-soft);  color: var(--accent-on-soft); }
.pill--neutral { background: var(--neutral-soft); color: var(--ink-muted); }

/* --- Значок в кружке -----------------------------------------------------
   stroke: currentColor обязателен: контурные значки рисуются обводкой, и
   без него они невидимы — заливки у них нет. */
.badge-icon {
  width: var(--icon-box); height: var(--icon-box);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex: none;
}
.badge-icon svg {
  width: var(--icon-sm); height: var(--icon-sm);
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.badge-icon--accent { background: var(--accent-soft); color: var(--accent-on-soft); }
.badge-icon--good   { background: var(--good-soft);   color: var(--good-ink); }
.badge-icon--warn   { background: var(--warn-soft);   color: var(--warn-ink); }
.badge-icon--alert  { background: var(--alert-soft);  color: var(--alert-ink); }

/* --- Кнопки -------------------------------------------------------------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--quiet {
  background: transparent;
  color: var(--ink-body);
  border-color: var(--line-strong);
}
.btn--quiet:hover { background: var(--surface-hover); color: var(--ink); }
.btn:disabled { opacity: .55; cursor: default; }

/* --- Полоса выполнения --------------------------------------------------- */
.bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--series-1);
  transition: width var(--slow) var(--ease);
}
.bar--good > i  { background: var(--series-2); }
.bar--warn > i  { background: var(--series-3); }
.bar--alert > i { background: var(--alert); }

/* --- Прокручиваемая область ----------------------------------------------
   Таблицы и графики шире экрана прокручиваются внутри себя. tabindex на
   таком блоке ставится из скрипта и только когда содержимое действительно
   не помещается: иначе с клавиатуры до него не добраться, а на широком
   экране появлялась бы лишняя остановка при обходе табом. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-x:focus-visible { outline-offset: -2px; }

/* --- Пустое состояние ----------------------------------------------------
   Пустой экран — приглашение к действию, а не сообщение об ошибке. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
.empty h3 { color: var(--ink); }

/* --- Разделитель --------------------------------------------------------- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}