/* Токены оформления. Цвета только отсюда: компоненты ссылаются на них через
   var(--…), и тема меняется в одном месте. Тёмная тема — основная.

   Цвет состояния (ok/warn/down/…) означает состояние и занят этим навсегда.
   Цвета протоколов (--s-*) означают принадлежность слоя графика и закреплены
   за протоколом: слой не перекрашивается, когда меняется порядок. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest-latin-400.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-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest-latin-500.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-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest-cyrillic-600.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest-latin-600.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-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400.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-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-latin-500.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; }

:root {
  color-scheme: dark;
  --ground: #0c0f14;
  --panel: #131820;
  --panel-2: #19202a;
  --line: #232b36;
  --line-soft: #1b222c;
  --ink: #e3e8ef;
  --ink-2: #aab3c0;
  --muted: #7d8795;
  --faint: #5d6776;
  --accent: #6ea8fe;
  --accent-soft: rgba(110, 168, 254, 0.14);
  --ok: #3fb950;
  --warn: #d6a031;
  --down: #f2564d;
  --maint: #6ea8fe;
  --unknown: #5d6673;
  --drift: #a371f7;
  --idle: #d6a031;
  /* Мягкие цвета текста тревоги: «внимание», а не крик. */
  --warn-ink: #e9c572;
  --down-ink: #f2a39c;
  --ok-soft: rgba(63, 185, 80, 0.13);
  --warn-soft: rgba(214, 160, 49, 0.12);
  --down-soft: rgba(242, 86, 77, 0.12);
  --maint-soft: rgba(110, 168, 254, 0.13);
  --drift-soft: rgba(163, 113, 247, 0.14);
  --unknown-soft: rgba(125, 135, 149, 0.14);
  --flag-edge: rgba(255, 255, 255, 0.14);
  --s-vless: #3987e5;
  --s-hysteria2: #d95926;
  --s-wireguard: #199e70;
  --s-awg: #9085e9;
  --s-awg3: #c98500;
  --s-telemt: #d55181;
  --s-mtproto: #2f9a2f;
  --s-other: #7d8795;
  --area-alpha: 0.26;
  --glint: rgba(255, 255, 255, 0.34);
  --tip-bg: #1a212b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --sans: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.3, .7, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground: #f4f5f7; --panel: #ffffff; --panel-2: #f7f8fa; --line: #e0e4ea; --line-soft: #eceff3;
    --ink: #161b22; --ink-2: #3d4652; --muted: #5f6975; --faint: #8d96a2;
    --accent: #1f6fd6; --accent-soft: rgba(31, 111, 214, 0.1);
    --ok: #1f883d; --warn: #b07a00; --down: #cf222e; --maint: #1f6fd6; --unknown: #8c959f; --drift: #8250df; --idle: #b07a00;
    --warn-ink: #8a5d00; --down-ink: #b3372e;
    --ok-soft: rgba(31, 136, 61, 0.1); --warn-soft: rgba(176, 122, 0, 0.1); --down-soft: rgba(207, 34, 46, 0.08);
    --maint-soft: rgba(31, 111, 214, 0.08); --drift-soft: rgba(130, 80, 223, 0.08); --unknown-soft: rgba(140, 149, 159, 0.14);
    --flag-edge: rgba(0, 0, 0, 0.1);
    --s-vless: #2a78d6; --s-hysteria2: #eb6834; --s-wireguard: #1baf7a; --s-awg: #4a3aa7; --s-awg3: #eda100; --s-telemt: #e87ba4; --s-mtproto: #008300;
    --area-alpha: 0.22; --glint: rgba(255, 255, 255, 0.55); --tip-bg: #ffffff; --shadow: 0 10px 30px rgba(20, 30, 45, 0.16);
  }
}