/*
 * Токены дизайн-системы (ТЗ 5.1.1).
 *
 * Значения не меняются от компонента к компоненту — тёмная тема включается
 * переопределением этих же переменных, поэтому ни одного цвета мимо них:
 * ни в компонентах, ни тем более только внутри блока тёмной темы (тогда он
 * не существовал бы в светлой).
 *
 * Порядок ниже такой, каким его требует задание: полный набор в :root,
 * затем переопределение тех же имён под prefers-color-scheme: dark
 * (следит за системой на лету — это чистый CSS, JS не нужен) и под явный
 * выбор темы человеком ([data-theme]), который перекрывает системный.
 */

:root {
  /* ---------- цвет: светлая тема (ТЗ 5.1.1, значения заказчика) ---------- */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --text: #111827;
  --text-2: #6B7280;
  --border: #E5E7EB;
  --hairline: rgba(17, 24, 39, .07);

  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-tint: #EAF0FE;
  --accent-rgb: 37, 99, 235;
  --on-accent: #FFFFFF;

  --success: #16A34A;
  --success-tint: #E7F6EC;
  /* текст на --success-tint: сам --success даёт на этой подложке контраст
     2,95 (мельче требуемых 4,5) — тот же случай, что и у --warning-text
     ниже, тем же приёмом: тёмный оттенок того же зелёного только для
     текста на подложке, сама метка остаётся «зелёной». */
  --success-text: #166534;
  --warning: #F59E0B;
  --warning-tint: #FEF3E0;
  --warning-text: #92620A;
  --error: #DC2626;
  --error-tint: #FCE9E9;
  /* --error на --error-tint даёт 4,1 — тоже мимо 4,5, чинится так же. */
  --error-text: #B91C1C;

  /* серые статусы вне палитры ТЗ: «не назначено» и «перенос/замена» —
     не заменяют акцент, а обслуживают состояния, которых нет в 5.1.1 */
  --neutral-tint: #EEF0F2;
  --neutral-text: #4B5563;
  --neutral-border: #C7CDD6;
  --substitution: #7C3AED;
  --substitution-tint: #F3EEFF;

  /* Два цвета графика «Финансов» (ТЗ 4.10.2) — доходы и расходы. Не
     --success/--error: эти два зарезервированы под статус (правило
     «статусные цвета только для статусов»), а здесь категориальная
     пара «что есть что», а не «хорошо/плохо» — расходы центра не
     тревога, а обычный факт. Пара проверена скриптом дизайн-скилла
     dataviz (validate_palette.js) на поверхности карточки: обе темы
     проходят полосу светлоты, порог хромы, разницу под дальтонизмом
     и контраст с фоном. --chart-profit — линия прибыли, тот же --text,
     чтобы она читалась как нейтральный итог поверх цветных столбцов,
     а не третий конкурирующий цвет. */
  --chart-revenue: #2563EB;
  --chart-expense: #EB6834;
  --chart-profit: var(--text);

  /* линия текущего времени — единственный выразительный элемент экрана
     (ТЗ этого шага). В светлой теме — точный волосок без свечения. */
  --now-line: var(--accent);
  --now-glow: none;

  /* ---------- форма ---------- */
  /* Высота шапки кабинета. Под ней прикрепляются шапки таблиц
     расписания, поэтому это общая величина, а не внутреннее дело
     шапки: разойдутся — таблица залезет под шапку или оставит щель. */
  --app-header-h: 60px;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
  /* карточки отделяются от фона волоском границы, а не тенью — тень только
     у того, что действительно висит над плоскостью (см. --shadow-float). */
  --shadow-float: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 8px rgba(17, 24, 39, .06);

  /* ---------- типографика ---------- */
  /* Golos Text рисовался под кириллицу — продукт целиком русскоязычный.
     Запасная цепочка — системные гротески, не Inter: Inter достаточно
     хорош, чтобы его брали по умолчанию для чего угодно, и это делает
     продукт неотличимым от любого другого. */
  --font: 'Golos Text', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- тёмная тема: системная (следует за ОС/браузером) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F1A;
    --surface: #131A29;
    --text: #E7E9EE;
    --text-2: #98A2B3;
    --border: #232B3D;
    --hairline: rgba(255, 255, 255, .07);

    --accent: #60A5FA;
    --accent-hover: #7DB6FB;
    --accent-tint: #152135;
    --accent-rgb: 96, 165, 250;
    --on-accent: #0B0F1A;

    --success: #4ADE80;
    --success-tint: #112A1E;
    /* здесь беда не заводится: светлый текст на тёмной подложке уже даёт
       контраст 8,8 — переопределять не на что, значение то же самое. */
    --success-text: #4ADE80;
    --warning: #FBBF24;
    --warning-tint: #2A2110;
    --warning-text: #FBBF24;
    --error: #F87171;
    --error-tint: #2A1414;
    --error-text: #F87171;

    --neutral-tint: #1B2333;
    --neutral-text: #98A2B3;
    --neutral-border: #2E3750;
    --substitution: #A78BFA;
    --substitution-tint: #211A3D;

    /* Тёмная лестница той же пары — не производная, а отдельно проверенный
       шаг (тот же приём, что и у --accent выше): своя светлота под тёмную
       поверхность карточки (#131A29), проверено тем же скриптом. */
    --chart-revenue: #3987E5;
    --chart-expense: #D95926;
    --chart-profit: var(--text);

    --now-line: var(--accent);
    --now-glow: 0 0 10px 1px rgba(var(--accent-rgb), .55);

    --shadow-float: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4);
  }
}

/* ---------- тёмная тема: выбрана явно (перекрывает систему) ---------- */
:root[data-theme="dark"] {
  --bg: #0B0F1A;
  --surface: #131A29;
  --text: #E7E9EE;
  --text-2: #98A2B3;
  --border: #232B3D;
  --hairline: rgba(255, 255, 255, .07);

  --accent: #60A5FA;
  --accent-hover: #7DB6FB;
  --accent-tint: #152135;
  --accent-rgb: 96, 165, 250;
  --on-accent: #0B0F1A;

  --success: #4ADE80;
  --success-tint: #112A1E;
  --success-text: #4ADE80;
  --warning: #FBBF24;
  --warning-tint: #2A2110;
  --warning-text: #FBBF24;
  --error: #F87171;
  --error-tint: #2A1414;
  --error-text: #F87171;

  --neutral-tint: #1B2333;
  --neutral-text: #98A2B3;
  --neutral-border: #2E3750;
  --substitution: #A78BFA;
  --substitution-tint: #211A3D;

  --chart-revenue: #3987E5;
  --chart-expense: #D95926;
  --chart-profit: var(--text);

  --now-line: var(--accent);
  --now-glow: 0 0 10px 1px rgba(var(--accent-rgb), .55);

  --shadow-float: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4);
}