/* PlaceScore «Кристалл» — интерфейсные правила UI карты (ПМ v1.2, п.2.1/2.2).
 * Значения — из design/assets/crystal/tokens.css (light) и tokens.json (dark).
 * НЕ трогает палитру данных карты (SCALE_15 / FULL_PALETTE_40 / 0.25 / #CCCCCC).
 * Сгенерированные токены подключаются отдельно (tokens.css); здесь — только потребление. */

/* Тёмная тема карты живёт на body.dark-theme (≠ [data-theme]) — синхронизация (ПМ v1.2, 2.0-3) */
body.dark-theme {
  --ps-bg: #0C1013;
  --ps-surface: #151B20;
  --ps-text: #ECF0F2;
  --ps-muted: #A5AFB6;
  --ps-primary: #74C476;
  --ps-accent: #FB6A4A;
  --ps-onPrimary: #0C1013;
  --ps-border: #2A3238;
}

/* 2.1 Шапка: фон поверхности, текст, шрифт головной */
#app-topbar {
  background: var(--ps-surface, #FFFFFF);
  color: var(--ps-text, #111416);
  font-family: Onest, 'Segoe UI', sans-serif;
  border-bottom: 1px solid var(--ps-border, #D7DCDF);
}

/* Табы вкладок: радиус m (10px), активный — фирменная зелень, не жёлтый и не синий */
.view-tab {
  border-radius: 10px;
  color: var(--ps-muted, #4B5358);
  font-family: Inter, 'Segoe UI', sans-serif;
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.view-tab.on {
  background: var(--ps-primary, #006D2C);
  color: var(--ps-onPrimary, #FFFFFF);
}
body.dark-theme .view-tab.on { color: #0C1013; }

/* Панели управления: поверхность, радиус, отступы по шкале 3/4 */
.controls-container, .control-item {
  background: var(--ps-surface, #FFFFFF);
  color: var(--ps-text, #111416);
  border-radius: 10px;
  border-color: var(--ps-border, #D7DCDF);
}

/* Легенда: контейнер по брендбуку; СВОТЧИ (цветные квадраты) НЕ трогаем — это данные */
.legend {
  background: var(--ps-surface, #FFFFFF);
  color: var(--ps-text, #111416);
  border-radius: 10px;
  border-color: var(--ps-border, #D7DCDF);
}

/* Девиз в шапке: рядом с табами, приглушённый (текст из modules/slogan.js) */
#brand-slogan {
  color: var(--ps-muted, #4B5358);
  font-family: Inter, 'Segoe UI', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* §4.8 контраст: плашка загрузки — белый на светло-голубом был 1.36 (перебиваем легаси-инлайн) */
#loading-indicator { color: #111416 !important; background: var(--ps-surface, #FFFFFF) !important; border: 1px solid var(--ps-border, #D7DCDF); }
body.dark-theme #loading-indicator { color: #ECF0F2 !important; }

/* §4.8: топбар в тёмной теме оставался белым (легаси перебивало по порядку загрузки) */
#app-topbar { background: var(--ps-surface, #FFFFFF) !important; }
body.dark-theme #app-topbar { background: #151B20 !important; color: #ECF0F2 !important; }

/* §4.8: тёмная тема — неактивные табы были светло-серыми на белом (1.7) */
body.dark-theme .view-tab:not(.on) { color: var(--ps-text, #ECF0F2); background: transparent; }

/* §4.8: шкала расстояний (GraphicScale) — подписи .subunitsLabel белым на светлой подложке (1.36) */
.subunitsLabel { color: #111416; background: var(--ps-surface, #FFFFFF); padding: 0 4px; border-radius: 4px; }
body.dark-theme .subunitsLabel { color: #ECF0F2; background: var(--ps-surface, #151B20); }
/* промежуточные подписи делений («1000», «2000», «3000km») — другой узел шкалы */
.division .label { color: #111416; background: var(--ps-surface, #FFFFFF); padding: 0 3px; border-radius: 4px; }
body.dark-theme .division .label { color: #ECF0F2; background: var(--ps-surface, #151B20); }

/* §4.8: кнопка сброса прозрачности — светлый фон со светлым текстом в dark (1.03) */
body.dark-theme #opacity-reset { background: var(--ps-surface, #151B20); color: var(--ps-text, #ECF0F2); border: 1px solid var(--ps-border, #2A3238); }

/* §4.8: табы «Считать» (.calc-tab) — светлый фон со светлым текстом в dark (1.0) */
body.dark-theme .calc-tab { background: var(--ps-surface, #151B20); color: var(--ps-text, #ECF0F2); border: 1px solid var(--ps-border, #2A3238); }
body.dark-theme .calc-tab.on,
body.dark-theme .calc-tab.active,
body.dark-theme .calc-tab[aria-selected="true"] { background: var(--ps-primary, #74C476); color: #0C1013; }
body.dark-theme .calc-tab.on *, body.dark-theme .calc-tab.active * { color: #0C1013; } /* легаси-спаны несут свой цвет и не наследуют */
/* легаси грузится ПОЗЖЕ ui.css: при равных important побеждает оно — перебой специфичностью */
html body.dark-theme .calc-tab.on, html body.dark-theme .calc-tab.active,
html body.dark-theme .calc-tab.on *, html body.dark-theme .calc-tab.active * { color: #0C1013 !important; }

/* Страницы бэкенда (backlog-p, hexcalc) подключают этот файл напрямую (ПМ v1.2, 2.2) */
.bk-shell, .hc-shell {
  background: var(--ps-bg, #F6F7F8);
  color: var(--ps-text, #111416);
  font-family: Inter, 'Segoe UI', sans-serif;
}
.bk-card, .hc-card {
  background: var(--ps-surface, #FFFFFF);
  border-radius: 10px;
  border: 1px solid var(--ps-border, #D7DCDF);
}