:root {
  color-scheme: light;

  /* Базовая палитра интерфейса. */
  --color-page: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fafc;
  --color-surface-muted: #f3f5f8;
  --color-surface-strong: #eef2f7;
  --color-surface-hover: #f3f7ff;
  --color-control: #ffffff;
  --color-control-border: #a5b1c2;
  --color-text: #1f2933;
  --color-text-strong: #111827;
  --color-text-muted: #6b7a89;
  --color-border: #e3e7ee;
  --color-border-strong: #cbd5e1;
  --color-accent: #1b6ef3;
  --color-accent-hover: #155bc8;
  --color-accent-soft: #eaf2ff;
  --color-accent-text: #174ea6;
  --color-focus-ring: rgb(27 110 243 / 24%);
  --color-overlay: rgb(15 23 42 / 45%);
  --color-on-solid: #ffffff;
  --color-chip-border: rgb(15 23 42 / 15%);

  /* Официальные печатные формы всегда выводятся как чёрные чернила на бумаге. */
  --color-document-paper: #ffffff;
  --color-document-ink: #000000;
  --color-document-rule: #000000;

  /* Семантические состояния. */
  --color-success: #15803d;
  --color-success-strong: #16a34a;
  --color-success-solid: #5cb85c;
  --color-success-solid-hover: #4cae4c;
  --color-success-soft: #dcfce7;
  --color-success-surface: #e8f5ec;
  --color-warning: #7a4b00;
  --color-warning-strong: #9a6700;
  --color-warning-border: #f0c36d;
  --color-warning-soft: #fff8e6;
  --color-danger: #b42318;
  --color-danger-strong: #dc2626;
  --color-danger-solid: #dc2626;
  --color-danger-solid-hover: #b42318;
  --color-danger-soft: #fee2e2;
  --color-info: #1d4ed8;
  --color-info-soft: #e8f0fe;
  --color-neutral-soft: #eef2f7;

  /* База интерфейса. Меняйте её в :root: производные размеры пересчитаются вместе. */
  --font-family-base: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 12px;
  --space-unit: 4px;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --viewport-height: 100vh;

  /* Общая типографика: компоненты используют шкалу, а не собственные размеры. */
  --font-size-2xs: calc(var(--font-size-base) * 5 / 6);
  --font-size-xs: calc(var(--font-size-base) * 11 / 12);
  --font-size-sm: var(--font-size-base);
  --font-size-md: calc(var(--font-size-base) * 13 / 12);
  --font-size-lg: calc(var(--font-size-base) * 7 / 6);
  --font-size-xl: calc(var(--font-size-base) * 4 / 3);
  --font-size-heading-sm: calc(var(--font-size-base) * 1.5);
  --font-size-heading-md: calc(var(--font-size-base) * 2);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-strong: 650;
  --font-weight-bold: 700;
  --line-height-tight: 1.35;
  --line-height-normal: 1.5;

  /* Общая шкала отступов для полей, кнопок, панелей и страниц. */
  --space-0-5: calc(var(--space-unit) / 2);
  --space-1: var(--space-unit);
  --space-1-5: calc(var(--space-unit) * 1.5);
  --space-2: calc(var(--space-unit) * 2);
  --space-2-5: calc(var(--space-unit) * 2.5);
  --space-3: calc(var(--space-unit) * 3);
  --space-3-5: calc(var(--space-unit) * 3.5);
  --space-4: calc(var(--space-unit) * 4);
  --space-4-5: calc(var(--space-unit) * 4.5);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --radius-sm: var(--space-1);
  --radius-md: calc(var(--space-unit) * 1.25);
  --radius-lg: calc(var(--space-unit) * 1.75);
  --radius-xl: var(--space-2-5);
  --radius-pill: 999px;
  /* Размеры элементов управления; сенсорный режим задаётся ниже. */
  --control-height-xs: calc(var(--control-height-sm) - var(--space-1));
  --control-height-sm: calc(var(--font-size-base) * var(--line-height-normal) + var(--control-padding-block) * 2 + var(--border-width) * 2);
  --control-height-md: calc(var(--control-height-sm) + var(--space-1-5));
  --control-height-touch: max(40px, calc(var(--control-height-sm) + var(--space-2-5)));
  --control-height-lg: max(44px, calc(var(--control-height-sm) + var(--space-3-5)));
  --control-padding-block: calc(var(--space-unit) * 1.25);
  --control-padding-inline: var(--space-2);
  --control-gap: var(--space-1-5);
  --button-height: var(--control-height-sm);
  --button-font-family: var(--font-family-base);
  --button-font-size: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  --button-line-height: var(--line-height-normal);
  --button-padding-block: var(--control-padding-block);
  --button-padding-inline: var(--space-2-5);
  --button-gap: var(--control-gap);
  --pagination-control-height: calc(var(--control-height-xs) / 2);
  --icon-size-sm: var(--font-size-lg);
  --icon-size-md: var(--font-size-xl);
  --icon-size-lg: var(--font-size-heading-sm);
  --table-font-family: var(--font-family-base);
  --table-font-size: var(--font-size-sm);
  --table-font-weight: var(--font-weight-normal);
  --table-cell-block: var(--control-padding-block);
  --table-cell-inline: var(--space-1-5);
  --table-header-padding-ratio: .5;
  --table-scrollbar-size: var(--space-2);
  /* Единые размеры полей и подписей во всех формах. */
  --form-control-height: var(--control-height-sm);
  --form-control-font-family: var(--font-family-base);
  --form-control-font-size: var(--font-size-sm);
  --form-control-line-height: var(--line-height-normal);
  --form-control-padding-block: calc(var(--control-padding-block) / 2);
  --form-control-padding-inline: calc(var(--control-padding-inline) / 2);
  --form-label-font-size: var(--font-size-sm);
  --form-label-gap: calc(var(--space-unit) * .75);
  --form-field-gap: var(--space-2);
  --form-column-gap: calc(var(--form-field-gap) * 2);
  --shadow-sm: 0 4px 16px rgb(15 23 42 / 6%);
  --shadow-md: 0 10px 24px rgb(15 23 42 / 14%);
  --shadow-lg: 0 18px 40px rgb(15 23 42 / 20%);
  --shadow-inset: inset 0 1px 3px rgb(15 23 42 / 12%);
  --shadow-badge: inset 0 0 0 1px rgb(15 23 42 / 10%);
  --shadow-drawer: -12px 0 24px rgb(15 23 42 / 20%);
  --z-dropdown: 12000;
  --z-modal: 13000;
  --z-notification: 14000;

  /* Размеры общего каркаса. */
  --content-max-width: 1920px;
  --content-edge-padding: calc(var(--space-unit) * 1.25);
  --page-inline-gutter: clamp(16px, 2vw, 32px);
  --header-logo-height: calc(var(--font-size-base) * 8 / 3);
  --site-header-height: calc(max(var(--header-logo-height), var(--control-height-sm)) + var(--space-1-5) * 2 + var(--border-width));

  /* Совместимые имена на период перевода существующих страниц. */
  --bg: var(--color-page);
  --panel: var(--color-surface);
  --panel-muted: var(--color-surface-muted);
  --surface-soft: var(--color-surface-soft);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --border: var(--color-border);
  --link: var(--color-info);
  --icon-filter: none;
  --icon-danger-filter: brightness(0) saturate(100%) invert(17%) sepia(88%) saturate(3201%) hue-rotate(352deg) brightness(91%) contrast(86%);
  --icon-on-solid-filter: brightness(0) invert(1);
  --logo-filter: none;
}

@media (pointer: coarse) {
  :root {
    --form-control-height: var(--control-height-touch);
    --form-control-font-size: var(--font-size-xl);
    --button-height: var(--control-height-touch);
  }
}

:root[data-theme="auto"] {
  color-scheme: light dark;
}

:root[data-theme="dark"],
.notifications[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #111827;
  --color-surface: #182231;
  --color-surface-soft: #202c3c;
  --color-surface-muted: #243244;
  --color-surface-strong: #2b3a4d;
  --color-surface-hover: #293a50;
  --color-control: #141e2b;
  --color-control-border: #61738b;
  --color-text: #e5edf6;
  --color-text-strong: #f8fafc;
  --color-text-muted: #a8b5c4;
  --color-border: #34445a;
  --color-border-strong: #50627a;
  --color-accent: #6da5ff;
  --color-accent-hover: #8ab7ff;
  --color-accent-soft: #203a61;
  --color-accent-text: #b9d2ff;
  --color-focus-ring: rgb(109 165 255 / 34%);
  --color-overlay: rgb(2 6 23 / 72%);
  --color-chip-border: rgb(255 255 255 / 22%);

  --color-success: #86d9a2;
  --color-success-strong: #4ade80;
  --color-success-solid: #3d9d58;
  --color-success-solid-hover: #4db969;
  --color-success-soft: #193c2a;
  --color-success-surface: #1b3528;
  --color-warning: #f3cc7a;
  --color-warning-strong: #f7c65d;
  --color-warning-border: #80652e;
  --color-warning-soft: #3b301c;
  --color-danger: #ffaaa3;
  --color-danger-strong: #fb7185;
  --color-danger-solid: #be123c;
  --color-danger-solid-hover: #9f1239;
  --color-danger-soft: #49242b;
  --color-info: #9cc1ff;
  --color-info-soft: #213b61;
  --color-neutral-soft: #2b3a4d;

  --shadow-sm: 0 4px 16px rgb(0 0 0 / 22%);
  --shadow-md: 0 10px 24px rgb(0 0 0 / 34%);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 46%);
  --shadow-inset: inset 0 1px 3px rgb(0 0 0 / 34%);
  --shadow-badge: inset 0 0 0 1px rgb(0 0 0 / 30%);
  --shadow-drawer: -12px 0 24px rgb(0 0 0 / 42%);
  --icon-filter: invert(92%) sepia(8%) saturate(344%) hue-rotate(174deg) brightness(101%) contrast(94%);
  --icon-danger-filter: brightness(0) saturate(100%) invert(77%) sepia(16%) saturate(1284%) hue-rotate(314deg) brightness(109%) contrast(101%);
  --logo-filter: invert(1) grayscale(1) brightness(1.45);
}

/* Не передаём неподдерживаемую единицу в расчёты с var(): это отменяет fallback. */
@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

@media (max-width: 768px), (pointer: coarse) {
  :root {
    --site-header-height: calc(max(var(--header-logo-height), var(--control-height-lg)) + var(--space-1-5) * 2 + var(--border-width));
  }
}