/* Панель ключей сети: единственный файл стиля-переменных.
   Взят из пробника компоновки (dashboard/design/probe/today.html, 24.10): тёплая тёмная
   гамма, янтарь — действие, мята — «в сети», красный — отзыв. Светлый профиль — «Бумага».
   Профиль: <html data-theme="night|paper">.
   Правило: в panel.css нет ни одного цвета и размера цифрами — только var(), это стережёт проверка. */

/* ---------- Шрифты (самохостинг, офлайн) ---------- */
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400 600; font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400 600; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
  font-weight: 400; font-display: swap;
}

/* ---------- Общее для всех профилей ---------- */
:root {
  --font: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  --num:  var(--mono);          /* числа панели — адреса, трафик: моно, чтобы не «плыли» */

  /* шкала 13 / 15 / 17 / 21 / 28 — как в ядре, чтобы панель не выбивалась */
  --fs-xs: 13px; --fs-s: 15px; --fs-m: 17px; --fs-l: 21px; --fs-xl: 28px;
  --lh: 1.45;

  /* шаг 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s-half: 6px;

  /* формы: плитка мягче полосы, у полосы — «бумажная» кромка слева */
  --r-tile:  22px;
  --r-strip: 14px;
  --r-ctl:   10px;
  --r-pill:  50%;

  --bw-hair: 1px;
  --bw-accent: 4px;     /* цветная кромка полосы-объекта: пир в сети, молчит, ключ гостя */
  --ls-tight: -0.02em;
  --lh-em: 1.45em;      /* строка под сообщение об ошибке: место не должно скакать */
  --tile-pad: var(--s4);
  --row-gap: var(--s2);
  --bar-h: 40px;
  --page-w: min(1080px, 100%);

  /* метрики разметки (в panel.css цифр быть не должно) */
  --dot: 9px; --dot-glow: 12px;
  --traffic-w: 108px;
  --min-btn: 34px;
  --login-w: 340px; --login-top: 14vh;
  /* Точка перелома — ЕДИНСТВЕННОЕ число, которое нельзя вынести сюда: var() в @media
     браузеры не вычисляют, правило было бы мёртвым. Живёт в panel.css в @media. */

  /* движение */
  --t-fast: .15s;
}

/* ---------- Ночной: тёплый тёмный, янтарь и мята ---------- */
:root, [data-theme="night"] {
  color-scheme: dark;

  --bg:      #15110e;   /* тёплый почти-чёрный, не синий */
  --panel:   #221c17;
  --panel-2: #2b231d;   /* строка под курсором, раскрытая плитка */
  --line:    rgba(255, 226, 190, .12);

  --text:  #f6eee4;
  --muted: #b3a595;
  --idle:  #8a7d6e;

  --accent: #ffa63d;    /* действие: выдать, перейти */
  --accent-2: #ffbd62;  /* светлый край градиента кнопки */
  --on-accent: #1a1208; /* текст на янтаре */
  --ok:   #86e3a6;      /* пир в сети */
  --teal: #2fd3be;      /* вторая опора: полоса, ссылка состояния */
  --hot:  #ff6e5a;      /* отзыв, ошибка */

  --glow-warm: rgba(255, 166, 61, .16);
  --glow-cool: rgba(47, 211, 190, .13);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 240, 220, .06);
  --shadow-btn: 0 10px 24px -10px var(--accent);
}

/* ---------- Бумага: тёплая светлая, те же роли ---------- */
[data-theme="paper"] {
  color-scheme: light;

  --bg:      #f7f3ec;
  --panel:   #fffdfa;
  --panel-2: #f3ece1;
  --line:    rgba(60, 40, 20, .16);

  --text:  #241d16;
  --muted: #6d6153;
  --idle:  #6f6252;   /* было #9a8d7c — на панели давало 2,76, «молчит» почти не видно */

  --accent: #96540a;  /* было #a85e00: на панели 4,20 — ссылки и рамки не дотягивали */
  --accent-2: #c97612;
  --on-accent: #fffdfa;
  --ok:   #17693f;
  --teal: #0f6f66;
  --hot:  #c4362c;

  --glow-warm: rgba(255, 166, 61, .22);
  --glow-cool: rgba(47, 211, 190, .16);
  --shadow: 0 14px 30px -18px rgba(70, 50, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow-btn: 0 8px 20px -12px rgba(120, 70, 10, .55);
}

/* ---------- База ---------- */
* { box-sizing: border-box; }
/* Подсветка касания на телефоне заливает нажатый элемент серым — если это холст,
   «волна» идёт по всему экрану. Владелец 25.10: «нажимаю по всему экрану, пробегает
   такая волна». Гасим её: свои состояния (:hover, :focus-visible) у нас есть. */
html { background: var(--bg); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; color: var(--text); font: 400 var(--fs-s)/var(--lh) var(--font);
  min-height: 100vh; -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(900px 520px at 88% -8%, var(--glow-warm), transparent 62%),
    radial-gradient(800px 560px at -6% 108%, var(--glow-cool), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--s-half); }
/* Смена темы: на кадр переключения гасим все переходы (класс ставит скрипт),
   иначе перекраска идёт волной по каждому элементу с transition на цвет. */
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }