/* Pulse-UI v2 · Слой 4 (UI) — дизайн-токены.
 *
 * ЕДИНСТВЕННЫЙ источник правды для цветов, отступов, типографики, радиусов,
 * границ и дименшенов. Все остальные CSS-файлы и HTML ссылаются на var(--…) —
 * литеральных hex/rgb-цветов и px-значений вне этого файла быть не должно.
 *
 * Подключать ПЕРЕД main.css / components.css в каждой странице.
 *
 * Шкала отступов/шрифтов — value-named (имя токена = значение в px), не
 * семантическая xs/sm/md/lg/xl. Причина — текущий дизайн использует ~десяток
 * разных px-значений; сведение к 5 ступеням округлило бы вёрстку (нарушение
 * критерия «пиксель-в-пиксель»). См. DECISIONS.md (запись 2026-05-21, Спринт 3).
 */

:root {
  /* ── Цвета · светлая тема ────────────────────────────────────────────── */
  /* Поверхности (фоны карточек/блоков, по возрастанию «глубины») */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f4ef;
  --color-background-tertiary: #e8e6df;
  /* Статусные фоны (баннеры, пилюли, ячейки) */
  --color-background-info: #e6f1fb;
  --color-background-success: #eaf3de;
  --color-background-warning: #faeeda;
  --color-background-danger: #fcebeb;
  /* Текст — по убыванию контраста */
  --color-text-primary: #2c2c2a;
  --color-text-secondary: #5f5e5a;
  --color-text-tertiary: #888780;
  /* Статусный текст (ссылки, статусы ok/warn/crit, info) */
  --color-text-info: #185fa5;
  --color-text-success: #3b6d11;
  --color-text-warning: #854f0b;
  --color-text-danger: #a32d2d;
  /* Границы */
  --color-border-tertiary: rgba(0,0,0,0.12);
  --color-border-secondary: rgba(0,0,0,0.22);
  --color-border-info: rgba(24,95,165,0.3);
  --color-border-success: rgba(59,109,17,0.3);
  --color-border-warning: rgba(133,79,11,0.4);
  --color-border-danger: rgba(163,45,45,0.3);

  /* ── Отступы (padding / margin / gap) ────────────────────────────────── */
  /* Имя = значение. Только реально используемые в дизайне ступени. */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;

  /* ── Типографика ─────────────────────────────────────────────────────── */
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-18: 18px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Веса и line-height — единственные используемые в дизайне значения. */
  --font-weight-medium: 500;
  --line-height-base: 1.5;
  --line-height-tag: 1.4;
  --line-height-legend: 1.6;

  /* ── Радиусы скругления ──────────────────────────────────────────────── */
  --border-radius-sm: 3px;   /* tag, skeleton, ssl-warn, footer-chip */
  --border-radius-md: 8px;   /* карточки, ячейки, пилюли */
  --border-radius-lg: 12px;  /* секции, легенда, баннер */

  /* ── Толщина границ ──────────────────────────────────────────────────── */
  --border-width-hairline: 0.5px;  /* все border: 0.5px solid/dashed */

  /* ── Дименшены (фиксированные размеры элементов) ─────────────────────── */
  --size-dot: 6px;            /* статус-точка .dot */
  --size-dot-lg: 10px;        /* крупная точка легенды .dot-lg */
  --skeleton-min-width: 24px; /* минимальная ширина skeleton-плейсхолдера */
  --skeleton-width-sm: 80px;  /* skeleton в server-card */
  --skeleton-width-md: 120px; /* skeleton в list-плейсхолдерах */
  --skeleton-width-lg: 140px; /* skeleton в endpoint-pill */
  --skeleton-width-xl: 200px; /* skeleton в баннере */
  --legend-term-width: 120px; /* левая колонка строки легенды */
  --grid-min-server: 170px;   /* minmax-трек grid'a серверов */
  --grid-min-cell: 160px;     /* minmax-трек grid'a бизнес-функций */
  --grid-min-project: 260px;  /* minmax-трек grid'a проектов */
  --layout-max-width: 760px;  /* max-width контентной колонки <main> */
}

/* ── Цвета · тёмная тема ──────────────────────────────────────────────────
 * Переопределяем только то, что меняется между темами (цвета). Отступы,
 * шрифты, радиусы, дименшены от темы не зависят. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary: #1a1a18;
    --color-background-secondary: #232220;
    --color-background-tertiary: #131210;
    --color-background-info: rgba(24,95,165,0.18);
    --color-background-success: rgba(59,109,17,0.18);
    --color-background-warning: rgba(133,79,11,0.22);
    --color-background-danger: rgba(163,45,45,0.18);
    --color-text-primary: #e8e6df;
    --color-text-secondary: #a8a6a0;
    --color-text-tertiary: #797874;
    --color-text-info: #85b7eb;
    --color-text-success: #97c459;
    --color-text-warning: #fac775;
    --color-text-danger: #f09595;
    --color-border-tertiary: rgba(255,255,255,0.14);
    --color-border-secondary: rgba(255,255,255,0.28);
  }
}