/* Дизайн-система ТелеМакса — токены (10.10.2026).
   Источник правды — Фигма «Телемакс – дизайн-система», коллекции
   Primitives / Color (Light, Dark) / Size. Имена совпадают с code syntax
   переменных в Фигме: var(--tm-*). Старые --brand, --text, --ds-* и т. п.
   в custom.css / day.css / catalog-ds.css — псевдонимы на эти токены.
   Новый цвет, отступ или размер шрифта сначала появляется в Фигме, потом здесь. */

@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/GolosText-var.ttf") format("truetype-variations"),
       url("/static/fonts/GolosText-var.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("/static/fonts/Geologica-var.ttf") format("truetype-variations"),
       url("/static/fonts/Geologica-var.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Палитры ---- */
  --tm-teal-50: #E9F8F8; --tm-teal-100: #CDEFEF; --tm-teal-200: #9FE0DF; --tm-teal-300: #62CBCB;
  --tm-teal-400: #25BBBC; --tm-teal-500: #05B3B4; --tm-teal-600: #047F82; --tm-teal-700: #06696C;
  --tm-teal-800: #0A5256; --tm-teal-900: #0C3D41; --tm-teal-950: #082729;
  --tm-steel-0: #FFFFFF; --tm-steel-25: #F7F9FB; --tm-steel-50: #EFF3F6; --tm-steel-100: #E3E9EE;
  --tm-steel-200: #D2DAE1; --tm-steel-300: #B2BEC9; --tm-steel-400: #8B9AA7; --tm-steel-500: #70818F;
  --tm-steel-600: #566777; --tm-steel-700: #405060; --tm-steel-800: #2A3745; --tm-steel-850: #1F2A36;
  --tm-steel-900: #17212C; --tm-steel-925: #121B24; --tm-steel-950: #0D151D; --tm-steel-1000: #070C11;
  --tm-red-50: #FDF0EF; --tm-red-100: #FADCD9; --tm-red-300: #F19A92; --tm-red-500: #DC3A2F; --tm-red-700: #B42318; --tm-red-950: #3A0F0B;
  --tm-green-50: #ECF8F1; --tm-green-100: #D3F0DF; --tm-green-300: #7CCFA0; --tm-green-500: #0E9F5A; --tm-green-700: #0B7A46; --tm-green-950: #0B2A1B;
  --tm-amber-50: #FEF6E7; --tm-amber-100: #FCEBC6; --tm-amber-300: #F6C46A; --tm-amber-500: #E08A00; --tm-amber-700: #A15C00; --tm-amber-950: #352106;

  /* Площадки — только как метка рядом с названием */
  --tm-platform-telegram: #2AABEE; --tm-platform-max: #8B3FE8; --tm-platform-vk: #0077FF;
  --tm-platform-ok: #EE8208; --tm-platform-rutube: #E6194B; --tm-platform-web: #3E9B4F;

  /* ---- Смысловые цвета (светлая тема) ---- */
  --tm-bg: var(--tm-steel-25);
  --tm-surface: var(--tm-steel-0);
  --tm-subtle: var(--tm-steel-50);
  --tm-hover: var(--tm-steel-100);
  --tm-night: var(--tm-steel-950);
  --tm-night-raised: var(--tm-steel-850);
  --tm-brand: var(--tm-teal-600);
  --tm-brand-hover: var(--tm-teal-700);
  --tm-brand-soft: var(--tm-teal-50);
  --tm-mark: var(--tm-teal-500);
  --tm-inverse: var(--tm-steel-900);
  --tm-danger: var(--tm-red-500);
  --tm-danger-hover: var(--tm-red-700);
  --tm-danger-soft: var(--tm-red-50);
  --tm-success-soft: var(--tm-green-50);
  --tm-warning-soft: var(--tm-amber-50);

  --tm-text: var(--tm-steel-900);
  --tm-text-sec: var(--tm-steel-700);
  --tm-muted: var(--tm-steel-600);
  --tm-on-brand: #FFFFFF;
  --tm-on-night: #FFFFFF;
  --tm-on-night-muted: var(--tm-steel-300);
  --tm-text-brand: var(--tm-teal-700);
  --tm-text-danger: var(--tm-red-700);
  --tm-text-success: var(--tm-green-700);
  --tm-text-warning: var(--tm-amber-700);
  --tm-text-inverse: #FFFFFF;

  --tm-line: var(--tm-steel-100);
  --tm-line-strong: var(--tm-steel-200);
  --tm-focus: var(--tm-teal-500);
  --tm-line-danger: var(--tm-red-300);
  --tm-icon: var(--tm-steel-600);
  --tm-icon-brand: var(--tm-teal-500);
  --tm-success: var(--tm-green-500);
  --tm-warning: var(--tm-amber-500);

  /* ---- Размеры ---- */
  --tm-space-2: 2px; --tm-space-4: 4px; --tm-space-6: 6px; --tm-space-8: 8px; --tm-space-12: 12px;
  --tm-space-16: 16px; --tm-space-20: 20px; --tm-space-24: 24px; --tm-space-32: 32px; --tm-space-40: 40px;
  --tm-space-48: 48px; --tm-space-64: 64px; --tm-space-80: 80px;
  --tm-radius-xs: 4px; --tm-radius-sm: 6px; --tm-radius-md: 10px; --tm-radius-lg: 14px; --tm-radius-xl: 20px; --tm-radius-full: 999px;

  /* ---- Шрифты ---- */
  --tm-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tm-font-display: "Geologica", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --tm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Высота ---- */
  --tm-shadow-card: 0 1px 2px rgba(13, 21, 29, .05);
  --tm-shadow-raised: 0 1px 2px rgba(13, 21, 29, .04), 0 10px 28px -10px rgba(13, 21, 29, .14);
  --tm-shadow-overlay: 0 2px 4px rgba(13, 21, 29, .06), 0 24px 56px -16px rgba(13, 21, 29, .28);
  --tm-focus-ring: 0 0 0 3px rgba(5, 179, 180, .35);

  /* Скос параллелограмма (штрихи знака). Используется в clip-path. */
  --tm-skew: 10px;
}

/* ---- Тёмная тема: та же коллекция Color, режим Dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tm-bg: var(--tm-steel-950);
    --tm-surface: var(--tm-steel-925);
    --tm-subtle: var(--tm-steel-900);
    --tm-hover: var(--tm-steel-850);
    --tm-night: var(--tm-steel-1000);
    --tm-night-raised: var(--tm-steel-900);
    --tm-brand: var(--tm-teal-400);
    --tm-brand-hover: var(--tm-teal-300);
    --tm-brand-soft: var(--tm-teal-950);
    --tm-inverse: var(--tm-steel-50);
    --tm-danger-soft: var(--tm-red-950);
    --tm-success-soft: var(--tm-green-950);
    --tm-warning-soft: var(--tm-amber-950);
    --tm-text: var(--tm-steel-50);
    --tm-text-sec: var(--tm-steel-300);
    --tm-muted: var(--tm-steel-400);
    --tm-on-brand: var(--tm-steel-950);
    --tm-text-brand: var(--tm-teal-300);
    --tm-text-danger: var(--tm-red-300);
    --tm-text-success: var(--tm-green-300);
    --tm-text-warning: var(--tm-amber-300);
    --tm-text-inverse: var(--tm-steel-900);
    --tm-line: var(--tm-steel-850);
    --tm-line-strong: var(--tm-steel-800);
    --tm-focus: var(--tm-teal-400);
    --tm-line-danger: var(--tm-red-500);
    --tm-icon: var(--tm-steel-400);
    --tm-icon-brand: var(--tm-teal-400);
    --tm-success: var(--tm-green-300);
    --tm-warning: var(--tm-amber-300);
  }
}

/* Явный тёмный режим — для блоков, которые всегда тёмные (боковое меню,
   ночные шапки): <aside data-theme="dark">. Повторяет блок выше. */
[data-theme="dark"] {
  --tm-bg: var(--tm-steel-950); --tm-surface: var(--tm-steel-925); --tm-subtle: var(--tm-steel-900);
  --tm-hover: var(--tm-steel-850); --tm-night: var(--tm-steel-1000); --tm-night-raised: var(--tm-steel-900);
  --tm-brand: var(--tm-teal-400); --tm-brand-hover: var(--tm-teal-300); --tm-brand-soft: var(--tm-teal-950);
  --tm-inverse: var(--tm-steel-50); --tm-text: var(--tm-steel-50); --tm-text-sec: var(--tm-steel-300);
  --tm-muted: var(--tm-steel-400); --tm-on-brand: var(--tm-steel-950); --tm-text-brand: var(--tm-teal-300);
  --tm-line: var(--tm-steel-850); --tm-line-strong: var(--tm-steel-800); --tm-icon: var(--tm-steel-400);
  --tm-icon-brand: var(--tm-teal-400);
}

/* ==========================================================================
   Базовые классы системы (.tm-*). Новые экраны собираются из них.
   ========================================================================== */

/* Наклонная плашка: параллелограмм со скосом как у штрихов знака */
.tm-slant { clip-path: polygon(var(--tm-skew) 0, 100% 0, calc(100% - var(--tm-skew)) 100%, 0 100%); }

/* Кнопка: Primary / Secondary / Ghost / Danger / Danger solid; размеры M (40) и S (32) */
.tm-btn {
  --tm-skew: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 500 14px/20px var(--tm-font); color: var(--tm-text); background: var(--tm-hover);
  clip-path: polygon(var(--tm-skew) 0, 100% 0, calc(100% - var(--tm-skew)) 100%, 0 100%);
  transition: background .12s, transform .12s, color .12s;
}
.tm-btn:hover { background: var(--tm-line-strong); transform: translateX(2px); }
.tm-btn:focus-visible { outline: 2px solid var(--tm-focus); outline-offset: 2px; }
.tm-btn:disabled, .tm-btn[aria-disabled="true"] { background: var(--tm-subtle); color: var(--tm-muted); cursor: default; transform: none; }
.tm-btn svg { width: 18px; height: 18px; flex: none; }
.tm-btn--primary { background: var(--tm-brand); color: var(--tm-on-brand); }
.tm-btn--primary:hover { background: var(--tm-brand-hover); }
.tm-btn--ghost { background: transparent; color: var(--tm-text-sec); }
.tm-btn--ghost:hover { background: var(--tm-hover); }
.tm-btn--danger { background: var(--tm-danger-soft); color: var(--tm-text-danger); }
.tm-btn--danger-solid { background: var(--tm-danger); color: #fff; }
.tm-btn--danger-solid:hover { background: var(--tm-danger-hover); }
.tm-btn--s { --tm-skew: 8px; height: 32px; padding: 0 16px; font-size: 13px; }
.tm-btn--s svg { width: 16px; height: 16px; }
.tm-btn--block { width: 100%; }

/* Чип-фильтр */
.tm-chip {
  --tm-skew: 7px;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 0; cursor: pointer;
  font: 500 13px/18px var(--tm-font); color: var(--tm-text); background: var(--tm-hover); white-space: nowrap;
  clip-path: polygon(var(--tm-skew) 0, 100% 0, calc(100% - var(--tm-skew)) 100%, 0 100%);
}
.tm-chip .n { color: var(--tm-muted); font-weight: 400; font-size: 12px; }
.tm-chip.is-on, .tm-chip[aria-pressed="true"] { background: var(--tm-inverse); color: var(--tm-text-inverse); }
.tm-chip.is-on .n { color: var(--tm-on-night-muted); }

/* Бейдж и тег */
.tm-badge {
  --tm-skew: 5px;
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 11px;
  font: 600 12px/16px var(--tm-font); color: var(--tm-text-sec); background: var(--tm-hover);
  clip-path: polygon(var(--tm-skew) 0, 100% 0, calc(100% - var(--tm-skew)) 100%, 0 100%);
}
.tm-badge--brand { background: var(--tm-brand-soft); color: var(--tm-text-brand); }
.tm-badge--success { background: var(--tm-success-soft); color: var(--tm-text-success); }
.tm-badge--warning { background: var(--tm-warning-soft); color: var(--tm-text-warning); }
.tm-badge--danger { background: var(--tm-danger-soft); color: var(--tm-text-danger); }
.tm-badge--solid { background: var(--tm-inverse); color: var(--tm-text-inverse); }
.tm-badge--pro { background: var(--tm-brand); color: #fff; }
.tm-badge--success::before, .tm-badge--warning::before, .tm-badge--danger::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Переключатель-параллелограмм: <label class="tm-switch"><input type="checkbox"><i></i>Live</label> */
.tm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14px/20px var(--tm-font); color: var(--tm-text); }
.tm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tm-switch i { position: relative; width: 44px; height: 22px; flex: none; background: var(--tm-line-strong);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: background .15s; }
.tm-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 16px; background: #fff;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transition: transform .15s; }
.tm-switch input:checked + i { background: var(--tm-brand); }
.tm-switch input:checked + i::after { transform: translateX(20px); }
.tm-switch input:focus-visible + i { outline: 2px solid var(--tm-focus); outline-offset: 2px; }

/* Карточка */
.tm-card { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-card); }

/* Ночной блок со знаком на фоне */
.tm-night { position: relative; overflow: hidden; background: var(--tm-night); color: var(--tm-on-night); }
.tm-night::after {
  content: ""; position: absolute; right: -40px; top: -30px; width: 480px; height: 368px; pointer-events: none;
  background: url("/static/img/mark-watermark.svg") no-repeat center / contain; opacity: 1;
}
.tm-night > * { position: relative; z-index: 1; }

/* Метка-плашка над заголовком */
.tm-plank { display: block; width: 72px; height: 6px; background: var(--tm-mark);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); margin-bottom: 10px; }

/* Цифры */
.tm-num { font-family: var(--tm-font-display); font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }

/* Уведомление (тост) */
.tm-toast { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 26px;
  background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-overlay); color: var(--tm-text); font: 500 14px/20px var(--tm-font); }
.tm-toast::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 10px; background: var(--tm-mark);
  clip-path: polygon(4px 0, 100% 0, 6px 100%, 0 100%); }
.tm-toast--success::before { background: var(--tm-success); }
.tm-toast--error::before { background: var(--tm-danger); }

@media (prefers-reduced-motion: reduce) {
  .tm-btn, .tm-switch i, .tm-switch i::after { transition: none; }
  .tm-btn:hover { transform: none; }
}