/**
 * Telepost — кабинет паблишера / публичная страница канала
 * Стартовые токены для HTML-прототипа. Подставьте hex из брендбука.
 * Подключение: <link rel="stylesheet" href="docs/ui-tokens.css" />
 *
 * /ch/ — две темы (ui-kit §12):
 *   tp-channel-default-* — сток, синий акцент (~ telepost.pro/ch/piter_poisk)
 *   tp-channel-custom-* — кастом, бирюза и тёмный фон (~ …/ch/id8418)
 */

:root {
  /* Brand */
  --tp-color-primary: #2563eb;
  --tp-color-primary-hover: #1d4ed8;
  --tp-color-primary-muted: #eff6ff;

  /* Surfaces */
  --tp-color-bg-page: #f3f4f6;
  --tp-color-bg-elevated: #ffffff;
  --tp-color-border: #e5e7eb;

  /* Text */
  --tp-color-text-primary: #111827;
  --tp-color-text-secondary: #6b7280;
  /* Пояснения под заголовками карточек: читабельнее, чем «всё secondary» */
  --tp-color-text-lead: #4b5563;
  /* Плейсхолдеры в полях — светлее подписи поля, иерархия: label > value > placeholder */
  --tp-color-text-placeholder: #9ca3af;
  --tp-color-text-on-primary: #ffffff;

  /* Semantic */
  --tp-color-success: #16a34a;
  --tp-color-success-bg: #ecfdf5;
  --tp-color-warning: #ea580c;
  --tp-color-error: #dc2626;
  --tp-color-info: #0284c7;
  --tp-color-info-bg: #e0f2fe;

  /* Chat */
  --tp-color-chat-out: var(--tp-color-primary);
  --tp-color-chat-in: #ffffff;
  --tp-color-chat-border: var(--tp-color-border);

  /* Radius & shadow */
  --tp-radius-sm: 6px;
  --tp-radius-md: 10px;
  --tp-radius-lg: 14px;
  --tp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Spacing scale */
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 24px;
  --tp-space-6: 32px;

  /* Type scale (замените на точные из продакшена) */
  --tp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tp-text-h1-size: 24px;
  --tp-text-h1-weight: 700;
  --tp-text-h2-size: 18px;
  --tp-text-h2-weight: 600;
  --tp-text-body-size: 14px;
  --tp-text-body-weight: 400;
  --tp-text-caption-size: 12px;
  --tp-text-caption-weight: 400;
  /* Подпись к полю (form label) — один размер с body, выделяется весом, не цветом 12px */
  --tp-text-label-size: 14px;
  --tp-text-label-weight: 600;

  /* Layout */
  --tp-sidebar-width: 240px;
  --tp-header-height: 56px;
  --tp-content-max-width: 1200px;

  /* Public /ch/ — сток (не кастомизированная страница) */
  --tp-channel-default-page-bg: #f4f7f9;
  --tp-channel-default-cta: #3b82f6;
  --tp-channel-default-cta-hover: #2563eb;
  --tp-channel-default-link: #3b82f6;
  --tp-channel-default-tab-active-bg: #eff6ff;
  --tp-channel-default-tab-active-text: #3b82f6;
  --tp-channel-default-pill-bg: #f3f4f6;
  --tp-channel-default-tag-bg: #e5e7eb;
  --tp-channel-default-card-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);

  /* Public /ch/ — кастом (визуальное оформление паблишера) */
  --tp-channel-custom-page-bg: radial-gradient(
    120% 80% at 50% 0%,
    #1e3a2f 0%,
    #0f172a 55%,
    #020617 100%
  );
  --tp-channel-custom-cta: #14b8a6;
  --tp-channel-custom-cta-hover: #0d9488;
  --tp-channel-custom-link: #14b8a6;
  --tp-channel-custom-tab-active-bg: #f3f4f6;
  --tp-channel-custom-tab-active-text: #14b8a6;
  --tp-channel-custom-pill-bg: #f9fafb;
  --tp-channel-custom-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);

  /* Общее для /ch/ (радиус карточек — подставьте из продакшена) */
  --tp-channel-card-radius: 24px;
  --tp-channel-footer-bg: #ffffff;

  /*
   * Кабинет паблишера / прототип (ui-kit §2, §6 — семантика вместо «случайных» hex в CSS)
   * Использовать в prototype/css/cabinet.css, channels.css и новых экранах кабинета.
   */
  --tp-border-muted-hover: #cbd5e1;
  --tp-border-primary-soft: rgba(37, 99, 235, 0.4);
  --tp-backdrop-scrim: rgba(15, 23, 42, 0.45);
  --tp-gradient-brand-mark: linear-gradient(135deg, var(--tp-color-primary) 0%, var(--tp-color-primary-hover) 100%);
  --tp-code-chip-bg: rgba(37, 99, 235, 0.08);
  --tp-callout-warning-fill: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
  --tp-callout-warning-border: #fed7aa;
  --tp-callout-warning-heading: #9a3412;
  --tp-shadow-card-lift: 0 8px 28px rgba(37, 99, 235, 0.12);
  --tp-table-row-hover: rgba(37, 99, 235, 0.05);
  --tp-gradient-avatar: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
  --tp-badge-info-bg: #dbeafe;
  --tp-badge-info-fg: #1d4ed8;
  --tp-badge-error-bg: #fee2e2;
  --tp-badge-error-fg: #b91c1c;
  --tp-badge-warn-bg: #ffedd5;
  --tp-badge-warn-fg: #c2410c;
  --tp-signal-task-bg: #fffbeb;
  --tp-signal-task-edge: #fde68a;
  --tp-signal-task-icon-bg: #fef3c7;
  --tp-signal-task-icon-fg: #b45309;
  --tp-signal-order-bg: #ecfdf5;
  --tp-signal-order-edge: #a7f3d0;
  --tp-signal-order-icon-bg: #d1fae5;
  --tp-signal-order-icon-fg: #047857;
  --tp-signal-danger-bg: #fef2f2;
  --tp-signal-danger-edge: #fecaca;
  --tp-signal-danger-icon-bg: #fee2e2;
  --tp-signal-danger-icon-fg: #b91c1c;
  --tp-panel-muted-bg: #f8fafc;
  --tp-panel-muted-bg-dim: #f1f5f9;
  --tp-dropdown-danger-hover-bg: #fef2f2;
  --tp-dropdown-danger-hover-fg: #991b1b;
  --tp-shell-drawer-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
  --tp-proto-footer-bg: #1f2937;
  --tp-proto-footer-fg: #f9fafb;
  --tp-callout-info-border: rgba(2, 132, 199, 0.22);
  --tp-pill-warn-bg: #fff7ed;
  --tp-pill-warn-fg: #c2410c;
  --tp-pill-success-fg: #15803d;
  --tp-shadow-floating: 0 4px 16px rgba(15, 23, 42, 0.1);
}