/*
 * Дизайн-система «Social Media Listener» — импортирована из claude.ai/design
 * (projectId 83739e43-…). Тёплая «Claude cream»: страница — тёплый серый,
 * карточки на тон светлее, плитки/поля — белые. Ink — почти чёрный тёплый
 * уголь. Оранжевый — единственный тёплый акцент, синий — только ссылки.
 *
 * Единый источник токенов: admin.css и мэтчинг подключают этот файл <link>'ом,
 * app.css (участник) — через @import. Ниже — токены системы + алиасы под
 * существующие имена платформы (--bg/--surface/--text/…), чтобы 230+ var()
 * в app.css/admin.css перекрасились каскадно.
 */

/* ---- Шрифты: TT Hoves (дисплей) + IBM Plex Sans (тело) ---- */
@font-face { font-family:'TT Hoves'; src:url('/static/fonts/TTHoves-DemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'TT Hoves'; src:url('/static/fonts/TTHoves-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/static/fonts/IBMPlexSans-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/static/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/static/fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('/static/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

:root {
  /* ===== Токены системы SML ===== */
  /* Поверхности: страница → карточка → белая плитка */
  --cream-page: #ded9d3;
  --cream-card: #ede8e3;
  --white:      #ffffff;
  /* Ink / текст */
  --ink:    #141413;
  --ink-2:  #262627;
  --body:   #3a3a38;
  --muted:  #696969;
  --muted-2:#555555;
  --faint:  #8e8b85;
  /* Акценты */
  --orange:     #F37338;
  --orange-ink: #9A3A0A;
  --sml-red:    #CF4500;
  --blue:       #3860BE;
  /* Линии */
  --line:        rgba(20,20,19,.16);
  --line-soft:   rgba(20,20,19,.12);
  --line-strong: rgba(20,20,19,.28);
  /* Радиусы / бордюры / тень / размеры */
  --radius-tile: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --border-solid: 1.5px;
  --shadow-card: 0 6px 24px 0 rgba(0,0,0,.05);
  --control-h: 52px;
  /* Семейства */
  --font-display: 'TT Hoves', 'IBM Plex Sans', -apple-system, Arial, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, Arial, sans-serif;

  /* ===== Алиасы под существующие токены платформы ===== */
  --bg:           var(--cream-page);   /* холст страницы */
  --surface:      var(--cream-card);   /* карточки/панели — кремовые, НЕ белые */
  --surface-alt:  var(--cream-page);   /* мягкая вложенная поверхность / hover */
  --tile:         var(--white);        /* белые плитки и поля ввода */
  --border:       var(--line);
  --border-hover: var(--line-strong);
  --text:   var(--ink);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --accent:    var(--ink);             /* основные CTA — ink-капсулы */
  --accent-bg: var(--cream-card);
  --accent-2:  var(--blue);            /* ссылки, вторичный акцент */
  /* Сигналы */
  --red:   var(--sml-red);  --red-bg:   #faece7;
  --teal:  #0f6e56;         --teal-bg:  #e1f5ee;   /* статус «завершён» */
  --amber: var(--orange-ink); --amber-bg: #fbeede; /* статус «в процессе» */
  --coral: #993c1d;         --coral-bg: #faece7;
  /* Радиусы (алиасы) */
  --radius:    var(--radius-tile);     /* поля ввода — 12px */
  --radius-lg: var(--radius-card);     /* карточки — 20px */
  /* Шрифты (алиасы) */
  --font:      var(--font-body);
  --font-head: var(--font-display);
  --dot-size: 36px;
  --dot-gap: 6px;
}

/* Заголовки — TT Hoves с плотным трекингом */
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: var(--ls-tight, -0.02em); color: var(--ink); }
h1 { letter-spacing: -0.03em; }
a { color: var(--accent-2); }

/* Тёплые тонкие скроллбары */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ddd7d1; border-radius: var(--radius-pill); border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }