/* tokens.css — слой PRIMITIVE и общие шкалы; semantic-значения задают themes/*.css. Единственный файл (вместе с themes/), где разрешены литеральные цвета и шрифты. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/ibm-plex-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/ibm-plex-sans-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-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/fonts/jetbrains-mono-cyrillic.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 500; font-display: swap;
  src: url("/fonts/jetbrains-mono-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; }
/* ==========================================================================
   Слой 1 — PRIMITIVE: сырые значения, без смысла. Только здесь и в themes/*.css
   разрешены литеральные цвета и шрифты (регламент: tests/test_ui_regulation.py).
   Компоненты и страницы primitive-токены (--p-*) не читают — только semantic и component.
   ========================================================================== */
:root {
  /* slate — «Светлая» */
  --p-slate-0: #ffffff;  --p-slate-50: #f8fafc;  --p-slate-100: #f1f5f9; --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1; --p-slate-400: #94a3b8; --p-slate-500: #64748b; --p-slate-600: #475569;
  --p-slate-700: #334155; --p-slate-900: #0f172a;

  /* graphite — «Тёмная» */
  --p-graphite-50: #f1f2f4;  --p-graphite-100: #e3e5e9; --p-graphite-300: #b4b9c2; --p-graphite-400: #9aa1ac;
  --p-graphite-500: #6f7681; --p-graphite-600: #525963; --p-graphite-700: #3a3f47; --p-graphite-750: #2d3138;
  --p-graphite-800: #23262b; --p-graphite-850: #1a1c20; --p-graphite-900: #121316;

  /* navy + azure — «Полночь» */
  --p-navy-50: #eaefff;   --p-navy-200: #b9c6f2; --p-navy-300: #9aaee6; --p-navy-500: #5f76b8; --p-navy-600: #43588f;
  --p-navy-700: #2a3b73;  --p-navy-750: #1f2e5e; --p-navy-800: #172250; --p-navy-850: #101a3d; --p-navy-900: #0a1128;
  --p-azure-300: #8fb4ff; --p-azure-400: #5c93ff; --p-azure-950: #04102e;

  /* sepia + rust — «Бумага» */
  --p-sepia-0: #fffdf6;  --p-sepia-50: #fbf6e9; --p-sepia-100: #f4ecd8; --p-sepia-200: #ebdfc3; --p-sepia-300: #ddcea6;
  --p-sepia-400: #8a7650; --p-sepia-600: #6b5843; --p-sepia-800: #3a2e22; --p-sepia-900: #281f16;
  --p-rust-600: #b3441a;  --p-rust-700: #9a3a14; --p-rust-800: #7d2f10;

  /* nord (Arctic Studio) — «Север» */
  --p-nord-0: #2e3440; --p-nord-1: #3b4252; --p-nord-2: #434c5e; --p-nord-3: #4c566a; --p-nord-3b: #8b97b0;
  --p-nord-4: #d8dee9; --p-nord-5: #e5e9f0; --p-nord-6: #eceff4;
  --p-nord-frost-1: #8fbcbb; --p-nord-frost-2: #94c6d5; --p-nord-frost-3: #81a1c1;
  --p-nord-info: #a5bfda;
  --p-nord-red: #f3adb4; --p-nord-orange: #d9906f; --p-nord-yellow: #ebcb8b; --p-nord-green: #acc498; --p-nord-purple: #b48ead;

  /* contrast — «Контраст» (WCAG AAA) */
  --p-hc-black: #000000; --p-hc-white: #ffffff; --p-hc-yellow: #ffe14a; --p-hc-gray-200: #e6e6e6; --p-hc-gray-300: #cfcfcf;
  --p-hc-gray-500: #8c8c8c; --p-hc-gray-800: #2b2b2b; --p-hc-gray-900: #141414;
  --p-hc-red: #ff7b72; --p-hc-orange: #ffa94d; --p-hc-green: #5fe38d; --p-hc-cyan: #66d4ff; --p-hc-violet: #d3a8ff;

  /* статусные оттенки, общие для светлых и тёмных тем */
  --p-green-300: #86efac; --p-green-400: #4ade80; --p-green-500: #22c55e; --p-green-700: #15803d; --p-green-800: #166534;
  --p-red-300: #fca5a5;   --p-red-400: #f87171;   --p-red-600: #dc2626;   --p-red-700: #b91c1c;   --p-red-800: #991b1b;
  --p-amber-300: #fcd34d; --p-amber-400: #fbbf24; --p-amber-500: #eab308; --p-amber-700: #a16207; --p-amber-750: #92580a; --p-amber-800: #854d0e;
  --p-sky-300: #7dd3fc;   --p-sky-400: #38bdf8;   --p-sky-700: #0369a1;   --p-sky-800: #075985;
  --p-orange-400: #fb923c; --p-orange-600: #ea580c; --p-orange-700: #c2410c;
  --p-violet-400: #a78bfa; --p-violet-700: #6d28d9;
  --p-teal-400: #2dd4bf;   --p-teal-700: #0f766e;
  --p-pink-400: #f472b6;   --p-pink-700: #be185d;

  /* затемнение под модалками и меню (альфа) — единственные прозрачные цвета, в «Контрасте» заменены сплошным */
  --p-scrim-dark: rgba(0, 0, 0, .55);
  --p-scrim-light: rgba(15, 23, 42, .4);
  --p-scrim-paper: rgba(40, 31, 22, .45);
  --p-black: #000000;
}

/* Общие шкалы, не зависящие от темы */
:root {
  --z-topbar: 30;
  --z-panel: 45;       /* выезжающие панели чата */
  --z-tooltip: 47;
  --z-scrim: 48;
  --z-sidebar: 49;
  --z-toast: 50;
  --z-drag: 60;        /* перетаскиваемый пункт и плашка обновления */
  --z-skip: 100;
  --topbar-h: 56px;    /* от неё считаются высоты экранов на весь вид */
  /* Брейкпоинты (в media-запросах переменные не работают — держим список здесь): 1100 · 900 · 760 · 640 · 480 */
  /* иконки страницы чатов — ступенью мельче общих; штрих тот же, что у темы */
  --cx-ic: 16px; --cx-ic-sm: 14px; --cx-ic-xs: 12px; --cx-ic-lg: 24px;
}

/* ==========================================================================
   Слой 2 — SEMANTIC, общая часть: производные от значений темы (сама тема — themes/*.css).
   Селектор [data-theme] нужен, чтобы мини-превью темы (data-theme на любом элементе) получало
   собственный набор, а не унаследованный от <html>.
   ========================================================================== */
:root, [data-theme] {
  /* шкала отступов = базовая ступень × плотность темы (--density задаёт тема) */
  --s1: calc(4px * var(--density));  --s1h: calc(6px * var(--density)); --s2: calc(8px * var(--density));
  --s3: calc(12px * var(--density)); --s4: calc(16px * var(--density)); --s5: calc(24px * var(--density));
  --s6: calc(32px * var(--density));

  /* прежние имена, на которые опираются экраны; новый код пишет --surface-* */
  --card: var(--surface-1);
  --muted: var(--surface-2);
  --mono: var(--font-mono);
  --cx-ic-stroke: var(--icon-stroke);

  /* фоны статусов: цвет статуса, подмешанный в поверхность карточки (непрозрачные, считаются от темы) */
  --accent-soft: color-mix(in srgb, var(--accent) var(--soft-strength), var(--surface-1));
  --success-soft: color-mix(in srgb, var(--success) var(--soft-strength), var(--surface-1));
  --warn-soft: color-mix(in srgb, var(--warn) var(--soft-strength), var(--surface-1));
  --danger-soft: color-mix(in srgb, var(--danger) var(--soft-strength), var(--surface-1));
  --info-soft: color-mix(in srgb, var(--info) var(--soft-strength), var(--surface-1));
  --notice-soft: color-mix(in srgb, var(--notice) var(--soft-strength), var(--surface-1));
  /* состояния акцентной заливки: подмешиваем цвет текста темы — в светлых темнее, в тёмных светлее */
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--fg));
  --accent-active: color-mix(in srgb, var(--accent) 72%, var(--fg));
  --danger-hover: color-mix(in srgb, var(--danger) 86%, var(--fg));
  /* затемнение за боковой панелью чата: тень шириной в экран, как раньше */
  --shadow-scrim: 0 0 0 100vmax var(--overlay);
}