/* Дизайн-система Slothicus — общий фундамент панели и консоли.

   Здесь только то, что обязано совпадать на обеих страницах: нейтральная
   палитра, шрифты, радиусы, тени, кривые движения, фокус и выделение. Всё,
   что относится к конкретному экрану, живёт в style.css (панель) и
   console.css (консоль) — они берут значения отсюда через --ds-*.

   Префикс --ds- выбран потому, что у обеих страниц свои исторические
   переменные (--text, --bg-side…). Общие токены с тем же именем тихо
   перебивали бы их в зависимости от порядка подключения файлов. */

:root {
  /* Нейтрали: почти чёрный с лёгким холодным оттенком. Слои различаются
     на 3–5 единиц яркости — достаточно, чтобы читалась глубина, и мало,
     чтобы интерфейс не превращался в набор серых плиток. */
  --ds-bg-0: #07080a;
  --ds-bg-1: #0b0c0f;
  --ds-bg-2: #101115;
  --ds-bg-3: #15171c;
  --ds-bg-4: #1b1d23;
  --ds-bg-5: #22252c;
  --ds-bg-6: #2a2d35;

  /* Линии — полупрозрачные, а не серые: на любом слое дают одинаково
     тонкую грань, без «грязного» ореола на светлых подложках. */
  --ds-line: rgba(255, 255, 255, .06);
  --ds-line-2: rgba(255, 255, 255, .09);
  --ds-line-3: rgba(255, 255, 255, .14);
  --ds-highlight: inset 0 1px 0 rgba(255, 255, 255, .045);

  --ds-text-1: #eeeff2;
  --ds-text-2: #a3a6af;
  --ds-text-3: #71747e;
  --ds-text-4: #4d5059;

  /* Акцент панели. Не жёлтый, а тёплое золото: на тёмном фоне жёлтый
     кричит, золото читается как «важное», а не как «ошибка». */
  --ds-gold: #e8b64a;
  --ds-gold-2: #f6d27c;
  --ds-gold-3: #c9942a;
  --ds-gold-ink: #1b1305;
  --ds-gold-soft: rgba(232, 182, 74, .11);
  --ds-gold-line: rgba(232, 182, 74, .34);
  --ds-gold-glow: 0 0 0 1px rgba(232, 182, 74, .35), 0 8px 28px -6px rgba(232, 182, 74, .45);

  /* Акцент консоли — индиго, родной язык Discord, чуть очищенный. */
  --ds-indigo: #6b74ff;
  --ds-indigo-2: #8a92ff;
  --ds-indigo-3: #5560f0;
  --ds-indigo-soft: rgba(107, 116, 255, .14);

  --ds-green: #3ecf8e;
  --ds-green-soft: rgba(62, 207, 142, .12);
  --ds-red: #ff5c61;
  --ds-red-soft: rgba(255, 92, 97, .12);
  --ds-amber: #f5b53d;
  --ds-blue: #4aa8ff;

  --ds-r-xs: 6px;
  --ds-r-sm: 8px;
  --ds-r-md: 10px;
  --ds-r-lg: 14px;
  --ds-r-xl: 18px;
  --ds-r-2xl: 24px;

  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --ds-shadow-2: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .45);
  --ds-shadow-3: 0 28px 70px -18px rgba(0, 0, 0, .8), 0 0 0 1px var(--ds-line-2);

  --ds-ease: cubic-bezier(.2, .8, .2, 1);
  --ds-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ds-spring: cubic-bezier(.34, 1.56, .64, 1);

  --ds-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Фон для полупрозрачных шапок. Размытие без полупрозрачности
     бессмысленно, а полупрозрачность без размытия даёт кашу из текста. */
  --ds-glass: rgba(11, 12, 15, .72);
  --ds-glass-blur: saturate(160%) blur(18px);

  color-scheme: dark;
}

html {
  /* Альтернативные начертания Inter: однообразная «a», открытые цифры и
     прямые кавычки. Так набор читается спокойнее и ближе к интерфейсам
     вроде Linear, а цифры в таблицах не прыгают по ширине. */
  font-feature-settings: "cv11", "ss01", "ss03";
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

::selection { background: rgba(232, 182, 74, .28); color: #fff; }

/* Фокус с клавиатуры виден всегда, фокус от мыши — нет. Кольцо рисуется
   тенью, а не outline: так оно повторяет скругление элемента.
   Поля ввода исключены — у них своё состояние фокуса (подсветка рамки),
   а кольцо вокруг голого textarea внутри композера смотрелось бы чужим. */
:focus { outline: none; }
:focus-visible:not(input):not(textarea):not(select):not([contenteditable]) {
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-bg-1), 0 0 0 4px var(--ds-gold-line) !important;
}

/* Тонкие полосы прокрутки. Firefox понимает только scrollbar-*, Chromium —
   только ::-webkit-*, поэтому описаны оба способа. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .1) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .08); border: 3px solid transparent;
  background-clip: padding-box; border-radius: 99px; min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .16); }
::-webkit-scrollbar-corner { background: transparent; }

/* Числа в интерфейсе — моноширинными цифрами: счётчики и таблицы
   перестают дёргаться, когда значение меняется. */
.tnum { font-variant-numeric: tabular-nums; }

/* Уважение к системной настройке «меньше движения» — одной строкой на
   обе страницы, а не копией в каждом файле. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}