:root {
  /* Colors — примитивы */
  --blue-700: #005cff;
  --blue-300: #83d0ff;
  --blue-200: #b5e1ff;
  --blue-500: #1e91ff;
  --blue-900: #0d409b;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --accent: var(--blue-700);
  --badge-bg: #e8e0f0;
  --emerald-600: #059669;

  /* Colors — семантика */
  --color-bg-page: var(--gray-100);
  --color-bg-card: var(--white);
  --color-border: var(--gray-200);
  --color-text: var(--gray-950);
  --color-text-muted: var(--gray-500);
  --color-text-secondary: var(--gray-700);
  --color-accent: var(--blue-700);
  --color-error: var(--red-500);
  --color-error-text: var(--red-600);
  --color-focus: var(--blue-700);
  --color-hover-bg: var(--gray-100);
  --color-hover-border: var(--gray-300);
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-danger-bg: #f8d7da;
  --color-danger-text: #721c24;

  /* Кнопки — типографика и отступы (шрифт из конфига: config/fonts.yaml или FONT_FAMILY) */
  --font-family-gilroy: 'Gilroy', sans-serif;
  --font-family-alumni: 'Alumni Sans', sans-serif;
  --font-family-manrope: 'Manrope', sans-serif;
  --font-family-primary: var(--font-family-gilroy);
  --btn-font-family: var(--font-family-primary);
  --btn-font-size: var(--font-size-ui);
  --btn-font-weight: var(--font-weight-medium);
  --btn-letter-spacing: 0.01em;
  --btn-icon-gap: 0.5rem;
  --btn-transition: var(--transition-base);

  /* Кнопки — focus ring */
  --btn-focus-ring-color: rgba(30, 145, 255, 0.35);
  --btn-focus-ring-width: 3px;
  --btn-focus-ring-offset: 1px;
  --btn-focus-ring-inset: rgba(255, 255, 255, 0.05);

  /* Кнопки — primary */
  --btn-primary-bg: var(--blue-700);
  --btn-primary-color: var(--white);
  --btn-primary-border: transparent;
  --btn-primary-shadow: none;
  --btn-primary-bg-hover: var(--blue-900);
  --btn-primary-color-hover: var(--white);
  --btn-primary-bg-active: #072a66;
  --btn-primary-color-active: var(--white);

  /* Кнопки — secondary (filled neutral) */
  --btn-secondary-bg: var(--gray-200);
  --btn-secondary-color: var(--gray-700);
  --btn-secondary-border: transparent;
  --btn-secondary-shadow: none;
  --btn-secondary-bg-hover: var(--gray-300);
  --btn-secondary-color-hover: var(--gray-900);
  --btn-secondary-bg-active: var(--gray-400);
  --btn-secondary-color-active: var(--gray-950);

  /* Кнопки — outline */
  --btn-outline-bg: transparent;
  --btn-outline-color: var(--blue-700);
  --btn-outline-border: var(--blue-700);
  --btn-outline-shadow: none;
  --btn-outline-bg-hover: rgba(0, 92, 255, 0.08);
  --btn-outline-color-hover: var(--blue-700);
  --btn-outline-bg-active: rgba(0, 92, 255, 0.15);
  --btn-outline-color-active: var(--blue-900);

  /* Кнопки — ghost */
  --btn-ghost-bg: transparent;
  --btn-ghost-color: var(--gray-700);
  --btn-ghost-border: transparent;
  --btn-ghost-shadow: none;
  --btn-ghost-bg-hover: rgba(55, 65, 81, 0.08);
  --btn-ghost-color-hover: var(--gray-900);
  --btn-ghost-bg-active: rgba(55, 65, 81, 0.14);
  --btn-ghost-color-active: var(--gray-950);

  /* Кнопки — danger */
  --btn-danger-bg: var(--red-500);
  --btn-danger-color: var(--white);
  --btn-danger-border: transparent;
  --btn-danger-shadow: none;
  --btn-danger-bg-hover: var(--red-600);
  --btn-danger-color-hover: var(--white);
  --btn-danger-bg-active: #991b1b;
  --btn-danger-color-active: var(--white);

  /* Кнопки — disabled */
  --btn-disabled-bg: var(--gray-200);
  --btn-disabled-color: var(--gray-500);
  --btn-disabled-border: transparent;
  --btn-disabled-shadow: none;

  /* Инпуты — состояния */
  --input-focus-border: var(--gray-400);
  --input-error-border: var(--red-500);
  --input-hover-bg: var(--gray-100);
  --input-hover-border: var(--gray-300);
  --input-readonly-bg: var(--gray-100);
  --input-readonly-text: var(--gray-700);

  /* Spacing — шкала */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --chip-padding-extra: 0.125rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Spacing — форма */
  --form-sections-gap: 1rem;
  --form-block-heading-gap: 0.75rem;
  --form-heading-margin-top: 0.25rem;
  --form-heading-margin-bottom: 0.25rem;
  --spacing-form-card: 1.5rem;
  --form-block-margin-top: 1rem;
  --form-block-margin-top-tight: 0.5rem;
  --form-token-copy-hint-space: 6rem;

  /* Spacing — кнопка */
  --btn-padding-y: 0.125rem;
  --btn-padding-x: 1.25rem;

  /* Spacing — таблица */
  --table-header-padding-y: 0.75rem;
  --table-header-padding-x: 1rem;
  --table-cell-padding-y: 0.75rem;
  --table-cell-padding-x: 1rem;
  --table-empty-cell-padding-y: 2rem;

  /* Spacing — пикер фильтра (селект в тулбаре) */
  --filter-picker-min-width: 8.5rem;
  --filter-picker-arrow-size: var(--space-md);
  --filter-picker-arrow-offset: var(--space-sm);
  --search-form-input-min-width: 17.5rem;

  /* Spacing — layout */
  --header-height: 4rem;
  --header-padding-x: 1.5rem;
  --sidebar-width: 18rem;
  --sidebar-padding: 1rem;
  --main-padding: 1.5rem;
  --nav-item-gap: 0.5rem;
  --nav-item-padding-x: 1rem;
  --nav-item-padding-y: 0.75rem;
  --page-toolbar-gap: 0.5rem;
  --page-toolbar-margin-bottom: 1.5rem;
  /* Фиксированная высота блока тулбара, чтобы таблица не смещалась при переключении разделов (Пользователи/Каналы и др.) */
  --height-page-toolbar: 3rem;

  /* Spacing — справка */
  --help-popover-padding: 1rem 1.25rem;
  --help-popover-max-width: 32rem;
  --help-content-padding: 2rem;
  --help-gap-vertical: 0.75rem;
  --help-list-indent: 1.25rem;

  /* Spacing — логин */
  --login-card-max-width: 28rem;
  --login-page-padding: 1.5rem;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  /* Однострочные поля и инлайн-контролы: input, select, плашки, кнопка «Выбрать файл», навигация, тосты и т.п. */
  --radius-input: 12px;
  --radius-card: 20px;
  --radius-table: 16px;
  --radius-button: 9999px;

  /* Размеры — высоты, ширины */
  --height-button: 2.5rem;
  --height-form-row: 2.75rem;
  --form-markdown-row-min-height: 24rem;
  --preview-story-height: 50px;
  --preview-slide-size: 36px;
  --post-attachment-preview-max: 17.5rem;
  --post-attachment-edit-preview-max: 12.5rem;
  --form-textarea-medium-min-height: 9.375rem;
  --table-cell-name-max-width: 20rem;

  /* Типографика — базовая */
  --font-size-ui: 0.875rem;
  --font-size-helper: 0.75rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Типографика — форма */
  --color-form-heading: var(--gray-700);
  --form-heading-size-section: 1.125rem;
  --form-heading-weight-section: 600;
  --form-heading-size-field: 1rem;
  --form-heading-weight-field: 500;

  /* Типографика — страница / заголовки */
  --page-title-size: 1.5rem;
  --page-title-weight: 600;
  --page-subtitle-size: 1rem;

  /* Типографика — справка (попап) */
  --help-h1-size: 1.125rem;
  --help-h2-size: 1rem;
  --help-h3-size: 0.9375rem;
  --help-body-size: 0.875rem;
  --help-code-size: 0.875em;

  /* Типографика — справка (fullview) */
  --help-fullview-h1-size: 1.25rem;
  --help-fullview-h2-size: 1.125rem;
  --help-fullview-h3-size: 1rem;
  --help-fullview-body-size: 0.9375rem;

  /* Переходы */
  --transition-base: 0.2s ease;

  /* Border width (для компонентов) */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-focus: 2px;

  /* Слайды — список/плитка */
  --slide-list-order-width: 2.5rem;
  --slide-list-preview-width: 80px;
  --slide-list-time-width: 5rem;
  --slide-list-actions-width: 100px;
  --slide-tile-min-height: 120px;
  --slide-tile-padding: var(--space-md);

  /* Форма — плашки и селекты (стрелка как у filter-picker: размер и отступ от края) */
  --form-select-padding-right: 1.25rem;
  --form-select-arrow-offset: var(--space-sm);
  --form-select-arrow-size: calc(var(--space-md) + var(--space-xs));
  --form-plate-min-width-sm: 6rem;
  --form-plate-min-width: 10rem;
  --form-plate-min-width-lg: 12rem;
  --form-plate-inner-padding: 2px;
  --form-helper-margin-bottom: 0.35rem;

  /* Чекбокс в плашке */
  --checkbox-size: 1.125rem;
  --checkbox-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --checkbox-indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3C/svg%3E");

  /* Квадрат выбора цвета (picker + hex в одном ряду) */
  --color-picker-size: 2.75rem;

  /* Модалка (превью файла) */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --modal-content-max-height: 200px;

  /* Ссылка с underline offset */
  --link-underline-offset: 2px;

  /* Tooltip (reference) */
  --tooltip-max-width: 20rem;
  --tooltip-padding-y: 0.625rem;
  --tooltip-padding-x: 0.75rem;
  --tooltip-font-size: 0.8125rem;
  --tooltip-color: var(--gray-800);
  --tooltip-bg: var(--white);
  --tooltip-border: var(--color-border);
  --tooltip-radius: var(--radius-md);
  --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Highlight background (для утилит) */
  --color-highlight-bg: rgba(181, 225, 255, 0.2);
}

/* Переключение шрифта по data-font на <html> (config/fonts.yaml или FONT_FAMILY) */
[data-font="alumni"] {
  --font-family-primary: var(--font-family-alumni);
}
[data-font="manrope"] {
  --font-family-primary: var(--font-family-manrope);
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Alumni Sans — полный набор (остальные файлы: Google Fonts, имена см. docs/fonts.md) */
@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alumni Sans';
  src: url('fonts/AlumniSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}