: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-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-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-soft: #fee2e2;
  --color-info: #1d4ed8;
  --color-info-soft: #e8f0fe;
  --color-neutral-soft: #eef2f7;

  /* Геометрия и глубина. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 44px;
  --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;

  /* Размеры общего каркаса. */
  --content-max-width: 1920px;
  --table-page-max-width: 2400px;
  --page-inline-gutter: clamp(16px, 2vw, 32px);
  --site-header-height: 69px;

  /* Совместимые имена на период перевода существующих страниц. */
  --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;
}

:root[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-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-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);
}

@media (max-width: 480px) {
  :root {
    --site-header-height: 61px;
  }
}