/* Токены дизайн-системы Squad Replay.
   Склеено из design/tokens/*.css — значения перенесены как есть, файлы идут
   целиком, вместе со своими комментариями. Правку вносить там и пересобирать,
   а не здесь.

   Подключается ПЕРЕД style.css: тот повторяет часть имён теми же значениями,
   так что порядок ни на что не влияет, но токены нужны и до него.
   Документация — design/readme.md. */

/* ======================== colors ======================== */
/* Палитра взята 1:1 из web/style.css и web/site.css проекта squadbest.
   Базовые значения — сверху, семантические алиасы — ниже. */
:root{
  /* --- фоны: четыре ступени тёмного, холодный синевато-серый --- */
  --bg:#0d1013;          /* корпус страницы */
  --bg2:#141a1f;         /* карточка, шапка, панель */
  --bg3:#1b2329;         /* вложенный блок, инпут, заголовок таблицы */
  --bg-hover:#171e24;    /* ховер строки/карточки */
  --bg-head:#111820;     /* шапка таблицы серверов */
  --bg-stage:#0a0d10;    /* холст карты в плеере */
  --bg-log:#0b0e11;      /* консоль агента */
  --bg-dialog:#17191c;   /* модалка */

  /* --- линии --- */
  --line:#26313a;        /* основная граница */
  --line-soft:#1a2127;   /* разделитель внутри списка */
  --line-2:#141a1f;
  --line-strong:#4a5158; /* ховер границы у кнопок */

  /* --- текст --- */
  --fg:#dde5ec;          /* основной */
  --dim:#7d8d9b;         /* второстепенный */
  --dimmer:#5d6a76;      /* метки времени, третий уровень */
  --dimmest:#6b7681;
  --fg-log:#9fb0bd;

  /* --- акцент: латунное золото, единственный «фирменный» цвет --- */
  --acc:#c8a24a;
  --acc-soft:rgba(200,162,74,.14);
  --acc-line:rgba(200,162,74,.4);
  --acc-glow:rgba(200,162,74,.10);
  --acc-warm:#e0c47a;    /* «горячо», предупреждение */
  --acc-hi:#e3c56a;

  /* --- статусы --- */
  --ok:#5fd08a;
  --ok-line:#2f6b45;
  --ok-bg:#16281e;
  --bad:#ff6b5b;
  --bad-line:#7a2f2f;
  --warn:#e09a7a;
  --warn-line:#6b3a2f;
  --info:#6fc0e0;
  --info-line:#2f5a6b;
  --live:#f00;           /* красный «в эфире», ровно значение ютуба */

  /* --- команды матча --- */
  --t1:#4a9eff;
  --t2:#ff5a4a;

  /* --- внешние бренды --- */
  --steam-bg:#1b2838;
  --steam-line:#2a3f5a;
  --steam-fg:#c7d5e0;
  --steam-acc:#66c0f4;
  --discord:#5865f2;
  --discord-hi:#6b76f4;
  --discord-link:#7289da;

  /* --- медали / места в топе --- */
  --pos1:#e3c56a;
  --pos2:#c3ccd4;
  --pos3:#c08a5a;

  /* --- роли и VIP-тиры --- */
  --role-owner:#f0907a;
  --role-admin:#e09a7a;
  --role-moderator:#6fc0e0;
  --role-vip-gold:#f0d060;
  --role-vip-silver:#c8d4de;
  --role-vip-bronze:#d99e6e;

  /* --- семантические алиасы --- */
  --surface-page:var(--bg);
  --surface-card:var(--bg2);
  --surface-inset:var(--bg3);
  --surface-hover:var(--bg-hover);
  --text-title:var(--fg);
  --text-body:var(--fg);
  --text-muted:var(--dim);
  --text-meta:var(--dimmer);
  --text-accent:var(--acc);
  --border-default:var(--line);
  --border-inner:var(--line-soft);
  --border-focus:var(--acc);
  --link:var(--acc);
  --link-hover:var(--acc-warm);
}

/* ======================== typography ======================== */
/* Один шрифтовой стек на весь продукт, размеры мелкие и плотные:
   базовый текст 13px/1.45, метки 10–11px в капсе с трекингом. */
:root{
  --font-ui:"Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,Consolas,"SF Mono",Menlo,monospace;

  /* размеры — ровно те, что встречаются в коде */
  --fs-9:9px;      /* подпись столбца графика */
  --fs-95:9.5px;   /* метка плитки, кит-бейдж */
  --fs-10:10px;    /* eyebrow, бейдж, заголовок таблицы */
  --fs-105:10.5px; /* пинг, счётчик */
  --fs-11:11px;    /* мелкий второстепенный */
  --fs-115:11.5px; /* mono, лог */
  --fs-12:12px;    /* второстепенный текст, кнопка */
  --fs-125:12.5px; /* строка таблицы, абзац карточки */
  --fs-13:13px;    /* базовый */
  --fs-14:14px;    /* заметный */
  --fs-15:15px;    /* h3 карточки */
  --fs-17:17px;    /* значение плитки */
  --fs-19:19px;
  --fs-21:21px;    /* h1 страницы */
  --fs-24:24px;    /* h1 кабинета */
  --fs-26:26px;
  --fs-30:30px;
  --fs-38:38px;    /* герой главной */

  --lh-tight:1.15; /* @kind other */
  --lh-snug:1.45; /* @kind other */ /* базовая */
  --lh-body:1.55; /* @kind other */
  --lh-loose:1.65; /* @kind other */
  --lh-list:1.75; /* @kind other */

  --fw-regular:400; /* @kind other */
  --fw-medium:600; /* @kind other */ /* «полужирный» в проекте — всегда 600 */
  --fw-bold:700; /* @kind other */

  --ls-tight:-.01em;
  --ls-eyebrow:.07em;   /* .sec-title, .ct-l */
  --ls-caps:.09em;      /* бренд, заголовок секции */
  --ls-badge:.05em;
  --ls-table:.08em;

  --nums-tabular:tabular-nums; /* @kind other */ /* все счётчики и время */
}

/* ======================== spacing ======================== */
/* Сетка не кратна 4: в проекте живут 3, 5, 6, 7, 9, 11, 13, 14, 17, 22, 26.
   Значения перенесены как есть, без округления. */
:root{
  --sp-1:3px;  --sp-2:5px;  --sp-3:6px;  --sp-4:7px;  --sp-5:8px;
  --sp-6:9px;  --sp-7:10px; --sp-8:11px; --sp-9:12px; --sp-10:14px;
  --sp-11:16px; --sp-12:18px; --sp-13:20px; --sp-14:22px; --sp-15:26px;
  --sp-16:30px;

  /* радиусы: почти каждый элемент со своим — переносим точно */
  --r-2:2px;   /* полоска графика, флаг */
  --r-3:3px;   /* бейдж, роль-бейдж */
  --r-4:4px;
  --r-5:5px;   /* мелкая кнопка, селект */
  --r-6:6px;   /* кнопка, инпут */
  --r-7:7px;   /* карточка списка */
  --r-8:8px;   /* карточка, таблица */
  --r-9:9px;   /* модалка топа */
  --r-10:10px; /* диалог китов */
  --r-pill:9999px;

  /* каркас */
  --hdr:52px;         /* высота шапки */
  --ftr:62px;         /* панель перемотки плеера */
  --side:320px;       /* правая колонка плеера */
  --wrap:1060px;      /* контентная ширина внешки */
  --aside:300px;      /* правая колонка кабинета */
  --sticky-top:68px;  /* прилипание сайдбара под шапкой */
  --border-w:1px; /* @kind spacing */ /* толщина везде одна */
}

/* ======================== elevation ======================== */
/* Тени почти не используются: плоскость держат границы 1px и фоновые ступени.
   Единственные реальные тени — модалки. Подсветка активной вкладки — inset-полоса. */
:root{
  --shadow-none:none;
  --shadow-dialog:0 18px 50px rgba(0,0,0,.5);
  --shadow-modal:0 18px 50px rgba(0,0,0,.5);
  --tab-active:inset 0 -2px 0 var(--acc); /* @kind shadow */
  --scrim:rgba(4,6,8,.72);      /* подложка диалога китов */
  --scrim-2:rgba(6,9,11,.72);   /* подложка «Топ недели» */
  --hero-glow:radial-gradient(120% 100% at 50% 0%,rgba(200,162,74,.10),transparent 62%); /* @kind other */
  --hero-fade:linear-gradient(180deg,#11171c 0%,var(--bg) 100%); /* @kind other */
  --cab-fade:linear-gradient(180deg,#11171c,var(--bg)); /* @kind other */
}

/* ======================== motion ======================== */
/* Анимации минимальные: переходы 120 мс на цвет/границу/фон и один пульс
   у «живых» индикаторов. Никаких сдвигов, отскоков и масштабирования. */
:root{
  --dur-fast:.1s; /* @kind other */
  --dur:.12s; /* @kind other */ /* базовая длительность всех ховеров */
  --ease:linear; /* @kind other */
  --pulse:1.4s; /* @kind other */ /* точка «в эфире» */
  --pulse-slow:1.8s; /* @kind other */
  --t-hover:background var(--dur),border-color var(--dur),color var(--dur); /* @kind other */
}

/* ==================== добавлено при переносе на сайт ==================== */
:root{
  --hdr-site:108px;  /* шапка внешки с логотипом; у плеера остаётся --hdr:52px */
  --logo-h:72px;     /* высота логотипа в шапке */
  --nav-fade:44px;   /* ширина градиентного затухания на правом краю вкладок */

  /* Кегли шапки: в дизайн-системе шкала кончается на 15 и 17 — эти три
     размера пришли вместе с переработанной шапкой и живут только в ней. */
  --fs-16:16px;      /* вкладка */
  --fs-20:20px;      /* «Выйти» */
  --fs-23:23px;      /* имя вошедшего */
  --avatar-hdr:48px; /* аватар в шапке; в плеере остаётся 24px */
}