/* ═══════════════════════════════════════════════════════════
   LEDJ Media — дизайн-токены (единый источник для всех поверхностей)
   Подключение: <link rel="stylesheet" href="/static/tokens.css"> (файл живёт в webapp/)
   в platform_v2.html и catalog.html (первым, до остальных стилей)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Цвета: поверхность и текст ─────────────────────────── */
  --bg:        #f5f5f7;   /* фон страницы */
  --surface:   #ffffff;   /* карточки, модалы, сайдбар */
  --surface-2: #f5f5f7;   /* вложенные зоны, сегмент-контролы, hover-строки */
  --text:      #1d1d1f;   /* основной текст */
  --text-2:    #6e6e73;   /* вторичный текст — 4.6:1 на белом (AA) ← было #86868b (3.4:1, провал) */
  --text-3:    #8e8e93;   /* только плейсхолдеры и disabled ← было #a1a1a6 (2.4:1) */
  --border:    #e5e5ea;
  --border-strong: #d2d2d7;

  /* ── Цвета: акцент и статусы (фон-пары для бейджей) ─────── */
  --accent:       #007aff;
  --accent-hover: #0071e3;
  --ok:        #1f9d45;  --ok-bg:     #e4f7ea;   /* Свободно */
  --warn:      #c93400;  --warn-bg:   #fff1e0;   /* Истекает — текст затемнён до AA ← было #ff9500 */
  --danger:    #e0352b;  --danger-bg: #ffe8e6;   /* Занято / Истекло / удаление */
  --neutral-badge-bg: #f0f0f2;                    /* Архив, нейтральные метки */
  --badge-bg:  #f0f0f2;   /* то же имя, что в макете v2 */
  --surface-3: #ececf0;   /* v2: полосы, шкалы, дорожки прогресса */
  --accent-bg: #e8f1ff;   /* v2: подложка акцента */
  --ph-a: #e9ebf0;  --ph-b: #dcdfe7;   /* v2: плейсхолдер фото (градиент) */
  --scrim: rgba(20,20,30,.38);          /* v2: подложка модалок и панелей */

  /* ── Радиусы (5 ступеней — вместо 3/5/6/8/9/10/11/12/13/14/16/18/20/22) */
  --r-xs: 6px;    /* мини-элементы: полоски, бейджи внутри карточек */
  --r-s:  8px;    /* чипы, мелкие контролы, бейджи */
  --r-m:  12px;   /* кнопки, инпуты, селекты */
  --r-l:  18px;   /* карточки, поповеры */
  --r-xl: 22px;   /* модалы, детальные панели */

  /* ── Высоты контролов (3 ступени) ───────────────────────── */
  --h-s: 32px;    /* чипы, компактные кнопки таблиц */
  --h-m: 42px;    /* кнопки, инпуты по умолчанию */
  --h-l: 50px;    /* главные CTA, поля логина */

  /* ── Типографика ────────────────────────────────────────── */
  --font: 'IBM Plex Sans', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  /* v2: цифры тем же Plex Sans с табличными цифрами, JetBrains Mono больше не грузим */
  --mono: 'IBM Plex Sans', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --font-mono: var(--mono); /* обратная совместимость (catalog.html) */
  font-variant-numeric: tabular-nums;
  --fs-xs:   12px;  /* меты, бейджи, подписи осей */
  --fs-s:    13px;  /* вторичные строки, подписи полей */
  --fs-m:    15px;  /* основной текст, инпуты, кнопки */
  --fs-l:    20px;  /* заголовки карточек/модалов */
  --fs-xl:   24px;  /* заголовки страниц */
  --fs-hero: 46px;  /* большие цифры дашборда */
  /* weights: 400 текст · 500 кнопки/метки · 600 заголовки. 700 не используем. */

  /* ── Отступы (шкала 4) ──────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-9: 36px;

  /* ── Тени (3 уровня) ────────────────────────────────────── */
  --shadow-card:    none;                 /* v2: карточка = граница без тени */
  --shadow-popover: 0 16px 40px rgba(0,0,0,.14);
  --shadow-modal:   0 30px 70px rgba(0,0,0,.28);

  /* ── Движение ───────────────────────────────────────────── */
  --t-fast: 130ms ease;    /* hover, нажатия */
  --t-med:  200ms ease;    /* появление поповеров, модалов */

  /* ── Слои ───────────────────────────────────────────────── */
  --z-popover: 40; --z-selectionbar: 50; --z-modal: 100; --z-toast: 200;
}

/* ── Видимый фокус (замена outline:none — WCAG 2.4.7) ─────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible {
  outline-offset: 0;
  border-color: var(--accent);
}

/* ── Reduced motion (WCAG 2.3.3) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Telegram Mini App: маппинг темы (только catalog.html) ──
   Telegram задаёт --tg-theme-*; при наличии тёмной темы клиента
   каталог наследует её вместо жёстко белой. */
.tg-app {
  --bg:      var(--tg-theme-secondary-bg-color, #f5f5f7);
  --surface: var(--tg-theme-bg-color, #ffffff);
  --text:    var(--tg-theme-text-color, #1d1d1f);
  --text-2:  var(--tg-theme-hint-color, #6e6e73);
  --accent:  var(--tg-theme-button-color, #007aff);
}

/* ── Тёмная тема (палитра из макета webapp/design/platform.html) ─────
   Включается атрибутом <html data-theme="dark">; :root[data-theme] по
   специфичности перебивает и :root здесь, и :root в platform_v2.html. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0e0e11;  --surface:   #17171b;  --surface-2: #1d1d22;  --surface-3: #26262d;
  --text:      #f2f2f5;  --text-2:    #a3a3ad;  --text-3:    #70707a;  --text-4: #4a4a52;
  --border:    #2a2a31;  --border-strong: #3a3a44;
  --line:      #2a2a31;  --line-2:    #26262d;
  --accent:       #3d8dff;  --accent-hover: #5c9fff;
  --accent-bg:    #12233d;  --accent-border: #1f3a66;
  --ok:        #3ecf6a;  --ok-2:      #34c759;  --ok-bg:     #12301d;  --ok-border: #1c4a2c;
  --warn:      #ffb340;  --warn-bg:   #3a2a0f;
  --danger:    #ff6b61;  --danger-2:  #ff6b61;  --danger-soft: #ff8a80;
  --danger-bg: #3b1613;  --danger-border: #55201c;
  --purple:    #ab8dff;  --purple-bg: #271a45;
  --warn-2:    #ff9f0a;  --ph-a: #22222a;  --ph-b: #2b2b35;
  --neutral-badge-bg: #26262d;  --badge-bg: #26262d;  --scrim: rgba(0,0,0,.6);
  --shadow-card:    none;
  --shadow-popover: 0 16px 40px rgba(0,0,0,.5);
  --shadow-modal:   0 30px 70px rgba(0,0,0,.7);
}