:root {
  /* ==============================================
     Цветовая палитра
     ============================================== */
  
  /* Основные цвета (Bulma-совместимые) */
  --color-primary: #3273dc;
  --color-primary-dark: #2366d1;
  --color-primary-darker: #1f5bb8;
  
  --color-success: #48c774;
  --color-success-dark: #3ec46d;
  --color-success-darker: #3abb66;
  
  --color-danger: #f14668;
  --color-danger-light: #ff3860;
  
  --color-warning: #ffdd57;
  --color-warning-dark: #f59e0b;
  
  --color-info: #3e8ed0;
  --color-info-light: #3273dc;
  
  /* Текстовые цвета */
  --color-text-dark: #363636;
  --color-text-medium: #4a4a4a;
  --color-text-light: #7a7a7a;
  --color-text-lighter: #b5b5b5;
  --color-text-muted: #6c757d;
  --color-text-disabled: #999;
  --color-text-strong: #363636;
  
  /* Фоновые цвета */
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-lighter: #f8f9fa;
  --color-bg-lightest: #fafafa;
  --color-bg-grey: #e8e8e8;
  --color-bg-dark: #363636;
  
  /* Специальные фоновые цвета */
  --color-bg-info-light: #e8f4fd;
  --color-bg-info-lighter: #d1ecf1;
  --color-bg-success-light: #d1e7dd;
  --color-bg-warning-light: #fffbeb;
  --color-bg-warning-lighter: #fff3cd;
  --color-bg-danger-light: #f8d7da;
  --color-bg-blue-light: #f0f8ff;
  --color-bg-changes: #fff8f0;
  
  /* Border цвета */
  --color-border: #dbdbdb;
  --color-border-light: #e5e7eb;
  --color-border-lighter: #efefef;
  --color-border-dark: #b5b5b5;
  --color-border-table: #dee2e6;
  --color-border-success: #badbcc;
  --color-border-warning: #ffecb5;
  --color-border-danger: #f5c2c7;
  
  /* Overlay цвета */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.25);
  --color-overlay-lighter: rgba(0, 0, 0, 0.05);
  
  /* ==============================================
     Тени (Box Shadows)
     ============================================== */
  
  --shadow-xs: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-sm: 0 2px 10px rgba(10, 10, 10, 0.1);
  --shadow-md: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
  --shadow-md-hover: 0 0.5em 1.5em -0.125em rgba(10, 10, 10, 0.15), 0 0 0 1px rgba(10, 10, 10, 0.05);
  --shadow-lg: 0 0.5em 1em rgba(10, 10, 10, 0.15);
  --shadow-xl: 0 0.5em 2em -0.125em rgba(10, 10, 10, 0.2), 0 0 0 1px rgba(10, 10, 10, 0.05);
  --shadow-2xl: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  
  /* Специальные тени */
  --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 10px 30px rgba(17, 24, 39, 0.08);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-tooltip: 0 4px 20px rgba(0, 0, 0, 0.4);
  
  /* Focus shadows */
  --shadow-focus-primary: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
  --shadow-focus-danger: 0 0 0 0.125em rgba(241, 70, 104, 0.15);
  --shadow-focus-warning: 0 0 0 0.125em rgba(255, 152, 0, 0.25);
  
  /* ==============================================
     Transitions
     ============================================== */
  
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease;
  --transition-medium: 0.25s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease-in-out;
  
  /* Специальные transitions */
  --transition-cubic: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cubic-slow: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-shadow: box-shadow 0.3s ease;
  --transition-transform: transform 0.3s ease;
  --transition-all: all 0.3s ease;
  --transition-all-fast: all 0.2s ease;
  
  /* ==============================================
     Spacing (Отступы)
     ============================================== */
  
  --spacing-xxs: 0.1rem;    /* 1.6px */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-base: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 2.5rem;    /* 40px */
  --spacing-3xl: 3rem;      /* 48px */
  
  /* ==============================================
     Border Radius (Скругления)
     ============================================== */
  
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-round: 50%;
  
  /* ==============================================
     Z-Index Layers (Слои)
     ============================================== */
  
  --z-base: 1;
  --z-sticky: 8;
  --z-sticky-alt: 9;
  --z-dropdown: 10;
  --z-overlay: 999;
  --z-sidebar: 1000;
  --z-modal: 1000;
  --z-notification: 1000;
  --z-tooltip: 10002;
  --z-tooltip-header: 10005;
  --z-tooltip-critical: 999999;
  
  /* ==============================================
     Font Sizes
     ============================================== */
  
  --font-xs: 0.7rem;        /* 11.2px */
  --font-sm: 0.75rem;       /* 12px */
  --font-base: 0.875rem;    /* 14px */
  --font-md: 0.9rem;        /* 14.4px */
  --font-lg: 1rem;          /* 16px */
  --font-xl: 1.75rem;       /* 28px */
  --font-2xl: 2.25rem;      /* 36px */
  
  /* ==============================================
     Font Weights
     ============================================== */
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* ==============================================
     Line Heights
     ============================================== */
  
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ==============================================
     Размеры элементов
     ============================================== */
  
  --input-height: 2.5rem;
  --input-height-small: 2rem;
  --input-height-large: 2.75rem;
  
  --checkbox-size: 1.25rem;
  --checkbox-size-large: 1.25rem;
  
  --icon-size-small: 16px;
  --icon-size-base: 18px;
  --icon-size-large: 20px;
  
  /* ==============================================
     Breakpoints (для справки в комментариях)
     ============================================== */
  
  /* --breakpoint-mobile: 576px; */
  /* --breakpoint-tablet: 768px; */
  /* --breakpoint-desktop: 1024px; */
  /* --breakpoint-widescreen: 1200px; */
  
  /* ==============================================
     Специфичные значения проекта
     ============================================== */
  
  --navbar-height: 52px;
  --sidebar-width: 250px;
  --sidebar-width-mobile: 80vw;
  
  --table-min-width: 80px;
  --dropdown-max-height: 300px;
  --modal-max-width: 600px;
  --modal-card-max-width: 800px;
  
  /* Таблицы */
  --table-border-width: 1px;
  --table-cell-padding: 0.75rem 0.5rem;
  --table-header-bg: #f8f9fa;
  
  /* Контейнеры */
  --container-max-width: 1120px;
  --content-padding: 0.75rem;
}

/* ==============================================
   Dark Mode Support (заготовка на будущее)
   ============================================== */

/* 
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-white: #1a1a1a;
    --color-bg-light: #2a2a2a;
    --color-text-dark: #e0e0e0;
    ...
  }
}
*/