/**
 * Переменные дизайн-системы (Design Tokens)
 * Определяет базовые отступы, радиусы, шрифты и цветовые схемы
 * Поддерживает светлую и тёмную темы через data-theme атрибут
 */

:root {
  /* === Базовые отступы === */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  /* === Радиусы скругления === */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  /* === Шрифты === */
  --font-main: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-lg: 1.125rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === CMS Типографика (единая шкала) === */
  --cms-font-family: var(--font-main);
  /*--cms-font-family: 'Segoe UI', sans-serif;*/
  --cms-font-size-2xs: 0.675rem; /* ~10.8px — счётчики, микротекст */
  --cms-font-size-xs: 0.8125rem; /* 13px — вспомогательный текст, табы */
  --cms-font-size-sm: 0.8125rem; /* 13px — грид, лейблы, меню, breadcrumb */
  --cms-font-size-md: 0.95rem; /* ~15.2px — стандартный текст, кнопки, поля */
  --cms-font-size-lg: 1.0825rem; /* ~17.3px — подзаголовки, brand */
  --cms-font-size-xl: 1rem; /* ~19.5px — h2, page title */
  --cms-font-size-2xl: 1.35rem; /* ~21.7px — иконки/бейджи */
  --cms-font-size-3xl: 1.625rem; /* 26px — крупные иконки */
  --cms-font-size-4xl: 2.1675rem; /* ~34.7px — аватар, hero icons */
  --cms-font-weight-normal: 400;
  --cms-font-weight-medium: 500;
  --cms-font-weight-semibold: 600;
  --cms-font-weight-bold: 700;
  --cms-line-height-base: 1.5;
  --cms-line-height-sm: 1.3;
  --cms-line-height-xs: 1.2;
}

/**
 * Светлая тема (по умолчанию)
 */
[data-theme='light'] {
    /* === Фоновые цвета === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-accent: #e9ecef;

    /* === Цвета текста === */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;

    /* === Цвета границ === */
    --border-color: #e8ecf0;
    --border-color-light: #f0f2f5;
    --border-color-dark: #d8dce3;

    /* === Цвета теней === */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-hover: rgba(0, 0, 0, 0.15);

    /* === Тени === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0px 0px 10px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 4px 12px 0 rgba(0, 0, 0, 0.1);

    /* === Цвета состояний === */
    --color-primary: #007bff;
    --color-danger: #fcc9c5;
    --color-warning: #fff3cd;
    --color-info: #d1ecf1;
    --color-success: #d4edda;
    --color-link: cornflowerblue;

    /* === Состояния строк === */
    --bg-row-hidden: lightgray;
    --bg-row-hover: rgba(0, 0, 0, 0.04);
    --bg-row-alt: #f8f9fa;
}

/**
 * Тёмная тема
 */
[data-theme='dark'] {
    /* === Фоновые цвета === */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-accent: #3d3d3d;

    /* === Цвета текста === */
    --text-primary: #f8f9fa;
    --text-secondary: #dee2e6;
    --text-muted: #adb5bd;

    /* === Цвета границ === */
    --border-color: #444444;
    --border-color-light: #555555;
    --border-color-dark: #333333;

    /* === Цвета теней === */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-hover: rgba(0, 0, 0, 0.7);

    /* === Тени === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 4px 12px 0 rgba(0, 0, 0, 0.3);

    /* === Цвета состояний === */
    --color-primary: #375a7f;
    --color-danger: #6b2c2c;
    --color-warning: #664d03;
    --color-info: #0c5460;
    --color-success: #1e4620;
    --color-link: #82b1ff;

    /* === Состояния строк === */
    --bg-row-hidden: #444444;
    --bg-row-hover: rgba(255, 255, 255, 0.05);
    --bg-row-alt: #2d2d2d;
}

/**
 * Переменные CMS (используются в cms.css)
 */
:root {
    --cms-font-family: var(--font-main);
    --cms-font-size-base: 0.875rem;
    --cms-border-radius: var(--border-radius-sm);
    --cms-spacing-xs: var(--spacing-xs);
    --cms-spacing-sm: var(--spacing-sm);
    --cms-spacing-md: var(--spacing-md);
}

/**
 * Настройки CMS для светлой темы
 */
[data-theme='light'] {
    /* === Основные цвета CMS === */
    --cms-primary: #007bff;
    --cms-danger: #dc3545;
    --cms-text-primary: var(--text-primary);
    --cms-text-secondary: var(--text-secondary);
    --cms-text-muted: var(--text-muted);
    --cms-text-inverse: #ffffff;
    --cms-text-bold: #515151;

    /* === Фоны CMS === */
    --cms-content-bg: var(--bg-primary);
    --cms-card-bg: var(--bg-primary);
    --cms-footer-bg: var(--bg-secondary);
    /*--cms-table-header-bg: var(--bg-secondary);*/
    --cms-table-header-bg: #f6f6f6;
    --cms-table-hover-bg: var(--bg-row-hover);
    --cms-menu-bg: #ffffff;

    /* === Границы CMS === */
    --cms-border-color: var(--border-color);
    --cms-card-border: var(--border-color);
    --cms-header-border: var(--border-color);

    /* === Тени CMS === */
    --cms-card-shadow: var(--shadow-md);
    --cms-card-shadow-hover: var(--shadow-lg);

    /* === Поля ввода CMS === */
    --cms-input-bg: #ffffff;
    --cms-input-color: var(--text-primary);
    --cms-input-border: var(--border-color);
    --cms-input-focus-border: #86b7fe;
    --cms-input-placeholder: var(--text-muted);

    /* === Ссылки CMS === */
    --cms-link-color: #0a58ca;
    --cms-link-hover-color: #084298;

    /* === Состояния строк CMS === */
    --cms-row-hover: rgba(10, 88, 202, 0.12);

    /* === Уведомления CMS === */
    --cms-notification-error-bg: #f8d7da;
    --cms-notification-error-border: #f5c2c7;
}

/**
 * Настройки CMS для тёмной темы
 */
[data-theme='dark'] {
    /* === Основные цвета CMS === */
    --cms-primary: #375a7f;
    --cms-danger: #e74c3c;
    --cms-text-primary: var(--text-primary);
    --cms-text-secondary: var(--text-secondary);
    --cms-text-muted: var(--text-muted);
    --cms-text-inverse: #1a1a1a;

    /* === Фоны CMS === */
    --cms-content-bg: var(--bg-primary);
    --cms-card-bg: var(--bg-secondary);
    --cms-header-bg: var(--bg-secondary);
    --cms-footer-bg: var(--bg-secondary);
    --cms-table-header-bg: var(--bg-accent);
    --cms-table-hover-bg: var(--bg-row-hover);

    /* === Границы CMS === */
    --cms-border-color: var(--border-color);
    --cms-card-border: var(--border-color);
    --cms-header-border: var(--border-color);

    /* === Тени CMS === */
    --cms-card-shadow: var(--shadow-md);
    --cms-card-shadow-hover: var(--shadow-lg);

    /* === Поля ввода CMS === */
    --cms-input-bg: #2d2d2d;
    --cms-input-color: var(--text-primary);
    --cms-input-border: var(--border-color);
    --cms-input-focus-border: #4a90e2;
    --cms-input-placeholder: var(--text-muted);

    /* === Ссылки CMS === */
    --cms-link-color: #82b1ff;
    --cms-link-hover-color: #a6c8ff;

    /* === Состояния строк CMS === */
    --cms-row-hover: rgba(130, 177, 255, 0.12);

    /* === Уведомления CMS === */
    --cms-notification-error-bg: #4a2020;
    --cms-notification-error-border: #6b2c2c;
}