/* ControlDesk — дизайн-токены.
   Одна шкала на всё: отступы, радиусы, типографика, размеры касания, состояния связи.
   Тёмная тема — основная («тёмный графит с мягким бирюзовым акцентом»); светлая — парная.
   Тему выбирает Telegram (colorScheme) → data-theme на <html>; вне Telegram — prefers-color-scheme. */

:root {
  /* шкала отступов (4-пиксельная сетка) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;

  /* радиусы */
  --r-s: 8px;  --r-m: 12px;  --r-l: 16px;  --r-pill: 999px;

  /* типографика: 12 / 14 / 16 / 20 / 26 */
  --fs-xs: 12px;  --fs-s: 14px;  --fs-m: 16px;  --fs-l: 20px;  --fs-xl: 26px;
  --lh-tight: 1.2;  --lh-body: 1.45;
  /* заголовки — Manrope, если он есть на устройстве/подключён; иначе близкие гротески; основной текст — системный */
  --font-head: "Manrope", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* минимальная область касания */
  --touch: 44px;

  /* движение */
  --dur-1: 120ms;  --dur-2: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* безопасные зоны: max(системная, Telegram) — JS обновляет --tg-* */
  --tg-top: 0px;  --tg-bottom: 0px;  --tg-left: 0px;  --tg-right: 0px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-top));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-bottom));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-left));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-right));

  /* высота приложения = видимая область (с учётом клавиатуры); задаёт JS, запас — 100dvh */
  --app-h: 100dvh;

  color-scheme: dark;
}

/* ---------- тёмная (по умолчанию) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #0D1418;
  --surface: #172227;
  --surface-2: #1F2E34;          /* приподнятая поверхность: поля, плитки, нажатие */
  --line: rgba(243, 246, 244, 0.10);
  --line-strong: rgba(243, 246, 244, 0.18);
  --text: #F3F6F4;
  --text-2: #9FB0B0;
  --accent: #65C9B3;
  --accent-ink: #062019;         /* текст на акцентной заливке */
  --accent-soft: rgba(101, 201, 179, 0.14);
  --danger: #E57570;
  --danger-ink: #2B0D0B;
  --danger-soft: rgba(229, 117, 112, 0.14);
  --warn: #E2B25C;
  --warn-soft: rgba(226, 178, 92, 0.14);
  --idle: #6B7F82;
  --scrim: rgba(3, 8, 10, 0.62);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --screen-bg: #05090B;
  color-scheme: dark;
}

/* ---------- светлая ---------- */
:root[data-theme="light"] {
  --bg: #F3F7F5;
  --surface: #FFFFFF;
  --surface-2: #E9F0EE;
  --line: rgba(15, 26, 29, 0.12);
  --line-strong: rgba(15, 26, 29, 0.22);
  --text: #0F1A1D;
  --text-2: #4F6466;
  --accent: #177A68;             /* контраст на белом ≥ 5:1 */
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(23, 122, 104, 0.12);
  --danger: #B93B36;
  --danger-ink: #FFFFFF;
  --danger-soft: rgba(185, 59, 54, 0.10);
  --warn: #8F5D06;
  --warn-soft: rgba(143, 93, 6, 0.12);
  --idle: #7A8B8D;
  --scrim: rgba(15, 26, 29, 0.45);
  --shadow: 0 10px 30px rgba(15, 26, 29, 0.18);
  --screen-bg: #0D1418;
  color-scheme: light;
}

/* вне Telegram (нет data-theme) следуем системной теме */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F3F7F5;  --surface: #FFFFFF;  --surface-2: #E9F0EE;
    --line: rgba(15, 26, 29, 0.12);  --line-strong: rgba(15, 26, 29, 0.22);
    --text: #0F1A1D;  --text-2: #4F6466;
    --accent: #177A68;  --accent-ink: #FFFFFF;  --accent-soft: rgba(23, 122, 104, 0.12);
    --danger: #B93B36;  --danger-ink: #FFFFFF;  --danger-soft: rgba(185, 59, 54, 0.10);
    --warn: #8F5D06;  --warn-soft: rgba(143, 93, 6, 0.12);
    --idle: #7A8B8D;  --scrim: rgba(15, 26, 29, 0.45);
    --shadow: 0 10px 30px rgba(15, 26, 29, 0.18);
    --screen-bg: #0D1418;
    color-scheme: light;
  }
}

/* «рамка связи»: цвет рамки вокруг экрана ПК = состояние соединения */
:root {
  --link-live: var(--accent);
  --link-wait: var(--warn);
  --link-off: var(--danger);
  --link-idle: var(--idle);
}