/*
 * Тема Dental Core: шрифт и токены (переменные) светлой и тёмной темы.
 * Подключается первой в index.html и gallery.html; все остальные таблицы стилей берут цвета, отступы и размеры только отсюда.
 * Описание токенов: docs/ui/design-system.md. Проверки: tests/ui/ui-theme.test.ts (контраст пар «цвет на фоне», совпадение тёмных блоков).
 *
 * Как выбирается тема:
 *   html без атрибута data-theme — как в системе (prefers-color-scheme);
 *   html[data-theme="light"] / html[data-theme="dark"] — выбор пользователя (lib/ui-theme.js, запоминается в localStorage).
 * Тёмные значения записаны ДВАЖДЫ (для системной тёмной и для явной): блоки должны совпадать, это проверяет тест.
 */

/* Montserrat (SIL OFL 1.1), самохостинг: файлы в ui/fonts/, лицензия — ui/fonts/LICENSE-OFL.txt. Подмножества подгружаются по мере нужды (unicode-range). */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/ui/fonts/montserrat-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/ui/fonts/montserrat-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/ui/fonts/montserrat-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/ui/fonts/montserrat-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext нужен знаку рубля (U+20BD) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/ui/fonts/montserrat-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/ui/fonts/montserrat-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/ui/fonts/montserrat-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/ui/fonts/montserrat-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/ui/fonts/montserrat-latin-400-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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/ui/fonts/montserrat-latin-500-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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/ui/fonts/montserrat-latin-600-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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/ui/fonts/montserrat-latin-700-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; }

/* ---------- Светлая тема (по умолчанию; [data-theme="light"] на любом элементе даёт светлый фрагмент внутри тёмной страницы) ---------- */
:root,
[data-theme="light"] {
  /* поверхности и линии */
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #f0f3f3;
  --surface-3: #e6ebec;
  --line: #e2e8ea;
  --card-border: #edf1f2; /* тонкая рамка карточек: почти незаметна, но держит край в режиме высокой контрастности */
  --line-strong: #8493a0; /* границы полей ввода и переключателей: 3:1 к поверхности */
  /* текст */
  --text: #1d2b30;
  --muted: #56656c;
  /* бренд: зелёный. --primary годится и для текста, и под белый текст кнопок; --brand — яркий, только для заливок и свечения без текста */
  --primary: #0c8040;
  --primary-hover: #096b35;
  --on-primary: #ffffff;
  --primary-soft: #e8f7ee;
  --brand: #2fbf71;
  --glow: rgba(47, 191, 113, 0.45);
  /* вспомогательные цвета: насыщенный (текст, линии, рамки) и пастельный фон под него */
  --green: #0c8040;  --green-soft: #e8f7ee;
  --blue: #08698f;   --blue-soft: #e0f3fb;
  --orange: #b05208; --orange-soft: #fff3e3;
  --red: #c62828;    --red-soft: #fde7e7;
  --purple: #7b3fb0; --purple-soft: #f0e6f9;
  --teal: #0b7a75;   --teal-soft: #dcf5f2;
  --amber: #8a6100;  --amber-soft: #fff6d1;
  --gray: #55616a;   --gray-soft: #e9edef;
  --focus: #0b6bcb;
  /* тени и подсветки */
  --shadow-sm: 0 1px 2px rgba(20, 40, 45, 0.06);
  --shadow: 0 1px 2px rgba(20, 40, 45, 0.05), 0 6px 22px rgba(20, 40, 45, 0.07);
  --shadow-lg: 0 4px 10px rgba(20, 40, 45, 0.08), 0 18px 44px rgba(20, 40, 45, 0.14);
  --scrim: rgba(12, 22, 26, 0.5);
  color-scheme: light;
}

/* ---------- Тёмная тема: как в системе ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1719;
    --surface: #172125;
    --surface-2: #1d2a2f;
    --surface-3: #26363c;
    --line: #2b3a40;
    --card-border: #223037;
    --line-strong: #6f8690;
    --text: #e6eff1;
    --muted: #9fb2b9;
    --primary: #3ecf83;
    --primary-hover: #66e0a1;
    --on-primary: #052214;
    --primary-soft: #173a29;
    --brand: #3ecf83;
    --glow: rgba(62, 207, 131, 0.35);
    --green: #4ade93;  --green-soft: #173a29;
    --blue: #56bdf0;   --blue-soft: #12354a;
    --orange: #f5a255; --orange-soft: #442c12;
    --red: #ff8a80;    --red-soft: #4a1f1f;
    --purple: #c49af0; --purple-soft: #35214d;
    --teal: #4fd1c5;   --teal-soft: #123d3a;
    --amber: #f2c94c;  --amber-soft: #3d3310;
    --gray: #aab7be;   --gray-soft: #2b383e;
    --focus: #7ab8ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.62);
    color-scheme: dark;
  }
}

/* ---------- Тёмная тема: выбрана явно (атрибут можно поставить и на отдельный элемент: тёмный фрагмент на светлой странице, витрина) ---------- */
[data-theme="dark"] {
  --bg: #0f1719;
  --surface: #172125;
  --surface-2: #1d2a2f;
  --surface-3: #26363c;
  --line: #2b3a40;
  --card-border: #223037;
  --line-strong: #6f8690;
  --text: #e6eff1;
  --muted: #9fb2b9;
  --primary: #3ecf83;
  --primary-hover: #66e0a1;
  --on-primary: #052214;
  --primary-soft: #173a29;
  --brand: #3ecf83;
  --glow: rgba(62, 207, 131, 0.35);
  --green: #4ade93;  --green-soft: #173a29;
  --blue: #56bdf0;   --blue-soft: #12354a;
  --orange: #f5a255; --orange-soft: #442c12;
  --red: #ff8a80;    --red-soft: #4a1f1f;
  --purple: #c49af0; --purple-soft: #35214d;
  --teal: #4fd1c5;   --teal-soft: #123d3a;
  --amber: #f2c94c;  --amber-soft: #3d3310;
  --gray: #aab7be;   --gray-soft: #2b383e;
  --focus: #7ab8ff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.62);
  color-scheme: dark;
}

/* ---------- Токены, одинаковые в обеих темах (ссылки на цвета пересчитываются в каждом фрагменте с data-theme) ---------- */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* прежние имена статусов (их используют существующие экраны) — теперь ссылки на семейства цветов */
  --ok: var(--green);
  --ok-bg: var(--green-soft);
  --warn: var(--orange);
  --warn-bg: var(--orange-soft);
  --danger: var(--red);
  --danger-bg: var(--red-soft);

  /* цвета рядов диаграмм по порядку; пятое и далее различаются ещё и формой маркера/штриховкой */
  --ui-c1: var(--green);
  --ui-c2: var(--blue);
  --ui-c3: var(--orange);
  --ui-c4: var(--purple);
  --ui-c5: var(--red);
  --ui-c6: var(--teal);
  --ui-c7: var(--amber);
  --ui-c8: var(--gray);

  /* шрифт */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-kpi: 28px;

  /* радиусы */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* отступы: шаг 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* плотность таблиц: у html[data-density="compact"] или у таблицы с классом ui-table--compact значения меньше */
  --cell-y: 12px;
  --cell-x: 14px;

  /* каркас */
  --sidebar: 264px;
  --sidebar-collapsed: 76px;
  --topbar-h: 64px;
  --transition: 0.16s ease;
}

:root[data-density="compact"] {
  --cell-y: 6px;
  --cell-x: 10px;
}