/*
 * MW Tools — design tokens.
 *
 * Тёмная тема — основная и единственная. Нейтральная серая шкала, тонкие
 * линии, цвет только у статусов. Шрифты лежат рядом (design/fonts/, OFL),
 * никаких CDN — панель отдаёт Node без зависимостей.
 *
 * Слои: примитивы (--gray-*, --amber-* …) → семантика (--bg, --text, --ok …).
 * Компоненты читают только семантику.
 */

/* ---------- Fonts (self-hosted, variable, latin + cyrillic) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-wght-normal.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-display: swap;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-cyrillic-wght-normal.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-display: swap;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-latin-wght-normal.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;

  /* ---------- Primitives: neutral gray ramp (no hue tint) ---------- */
  --gray-0:   #0b0b0b;  /* page */
  --gray-50:  #0e0e0e;  /* sunken: inputs, segmented track */
  --gray-100: #111111;  /* sidebar */
  --gray-150: #141414;  /* card */
  --gray-200: #181818;  /* hover on card */
  --gray-250: #1c1c1c;  /* faint line, row separators */
  --gray-300: #1f1f1f;  /* active pill */
  --gray-350: #262626;  /* hairline border */
  --gray-400: #2e2e2e;  /* control border */
  --gray-450: #3a3a3a;  /* strong border, hover border */
  --gray-500: #5a5a5a;  /* focus border, disabled text */
  --gray-600: #8a8a8a;  /* tertiary text  (5.3:1 on card) */
  --gray-700: #a3a3a3;  /* secondary text (7.4:1 on card) */
  --gray-800: #d4d4d4;
  --gray-900: #ededed;  /* primary button */
  --gray-950: #f5f5f5;  /* primary text */

  /* ---------- Primitives: status hues (fg / tinted bg / line) ---------- */
  --amber-fg: #f5b545;  --amber-bg: #251b08;  --amber-line: #4a3510;
  --green-fg: #4ad295;  --green-bg: #0b2117;  --green-line: #15432d;
  --red-fg:   #ff6b6f;  --red-bg:   #2a1012;  --red-line:   #521c20;
  --violet-fg:#b39dff;  --violet-bg:#1c1631;  --violet-line:#382c63;

  /* ---------- Semantic: surfaces ---------- */
  --bg:            var(--gray-0);
  --bg-side:       var(--gray-100);
  --surface:       var(--gray-150);
  --surface-hover: var(--gray-200);
  --surface-sunken:var(--gray-50);
  --surface-active:var(--gray-300);
  --surface-raised:#1a1a1a;           /* toast, modal */
  --scrim:         rgb(0 0 0 / 0.66);

  /* ---------- Semantic: lines ---------- */
  --line-faint:  var(--gray-250);
  --line:        var(--gray-350);
  --line-ctrl:   var(--gray-400);
  --line-strong: var(--gray-450);
  --line-focus:  var(--gray-500);

  /* ---------- Semantic: text ---------- */
  --text:        var(--gray-950);
  --text-2:      var(--gray-700);
  --text-3:      var(--gray-600);
  --text-off:    var(--gray-500);
  --text-invert: var(--gray-0);

  /* ---------- Semantic: action ---------- */
  --accent:       var(--gray-900);     /* white-on-black primary */
  --accent-hover: #ffffff;
  --accent-text:  var(--gray-0);
  --focus-ring:   #f5f5f5;

  /* ---------- Semantic: status (the only color in the UI) ----------
   * wait    — серый   : ждёт, отключён, нет данных
   * busy    — янтарь  : в очереди, качается, предупреждение
   * ok      — зелёный : готово, активен, всё работает
   * fail    — красный : ошибка, опасное действие
   * manual  — фиолет  : вручную (файл загружает человек)
   */
  --wait:   var(--gray-600); --wait-bg:   #1a1a1a;          --wait-line:   var(--gray-400);
  --busy:   var(--amber-fg); --busy-bg:   var(--amber-bg);  --busy-line:   var(--amber-line);
  --ok:     var(--green-fg); --ok-bg:     var(--green-bg);  --ok-line:     var(--green-line);
  --fail:   var(--red-fg);   --fail-bg:   var(--red-bg);    --fail-line:   var(--red-line);
  --manual: var(--violet-fg);--manual-bg: var(--violet-bg); --manual-line: var(--violet-line);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --fs-micro: 0.6875rem;  /* 11  — uppercase labels, tags, table heads */
  --fs-xs:    0.75rem;    /* 12  — meta, hints, mono secondary lines */
  --fs-sm:    0.8125rem;  /* 13  — dense UI: nav, table cells, buttons */
  --fs-base:  0.875rem;   /* 14  — body, inputs */
  --fs-md:    1rem;       /* 16  — card titles */
  --fs-lg:    1.25rem;    /* 20  — modal / section titles */
  --fs-xl:    1.75rem;    /* 28  — page title */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    680;

  --tracking-title: -0.022em;
  --tracking-label: 0.08em;   /* UPPERCASE micro labels only */

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 56px;

  --gutter: 32px;            /* page side padding; 16px on phones */
  --content-max: 1120px;
  --side-w: 224px;
  --topbar-h: 56px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;    /* tags, checkbox */
  --r-sm: 6px;    /* buttons, inputs, pills */
  --r-md: 8px;    /* nav items, rows, segmented */
  --r-lg: 12px;   /* cards, modal */
  --r-full: 999px;

  /* ---------- Control sizes ---------- */
  --h-sm: 30px;
  --h-md: 36px;
  --h-lg: 44px;
  --h-xl: 56px;   /* big two-line action */

  /* ---------- Borders ---------- */
  --bw: 1px;
  --border: var(--bw) solid var(--line);
  --border-faint: var(--bw) solid var(--line-faint);

  /* ---------- Shadows: only floating layers carry depth ---------- */
  --shadow-pop:   0 8px 24px -6px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
  --shadow-modal: 0 24px 64px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.4);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 200ms;   /* toggles, segment slide */
  --dur-3: 320ms;   /* drawer, modal, toast */

  /* ---------- Layers ---------- */
  --z-side: 30;
  --z-top: 20;
  --z-dock: 25;
  --z-modal: 50;
  --z-toast: 60;
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --fs-xl: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}