/**
 * Design Tokens — Single Source of Truth
 * 
 * КРИТИЧНО: Этот файл содержит ТОЛЬКО цветовые токены.
 * Используется генератором цветовых схем для создания вариантов.
 * 
 * Для не-цветовых токенов (spacing, типографика, радиусы, тени, motion, layout)
 * см. tokens.source.base.css
 * 
 * @version 1.0
 * @created 2025-01-XX
 */

:root {

  /* ============================================
     ЦВЕТА — БРЕНДОВЫЕ
     ============================================ */

  /* Primary (основной синий) */
  --color-primary: 21, 90, 148;
  --color-primary-hover: 56, 170, 249;
  --color-primary-active: 28, 122, 191;
  --color-primary-light: 150, 200, 230; /* Светло-голубой с сероватым оттенком */

  /* Navy (тёмно-синий акцент) */
  --color-navy: 15, 46, 75;

  /* ============================================
     ЦВЕТА — СТАТУСНЫЕ
     ============================================ */

  --color-success: 25, 195, 125;

  --color-error: 255, 109, 90;

  --color-warning: 245, 158, 11;
  
  /* Public filter accent (orange/amber for public-only toggle and lock icon) */
  --color-public-accent: 245, 158, 11;

  --color-info: 59, 130, 246;

  /* ============================================
     ЦВЕТА — ГРАДИЕНТЫ (промежуточные цвета для плавных переходов)
     ============================================ */

  /* Gradient intermediate colors for smooth transitions */
  --color-primary-gradient-light: 44, 146, 219;
  --color-primary-gradient-dark: 31, 119, 183;
  --color-success-gradient-light: 45, 212, 191;
  --color-success-soft: 80, 160, 130; /* Более спокойный вариант success для градиентов и длительного чтения */
  --color-error-gradient-light: 251, 113, 133;
  --color-error-soft: 220, 140, 130; /* Более спокойный вариант error для градиентов */
  --color-warning-soft: 215, 165, 90; /* Более спокойный вариант warning для длительного чтения (более насыщенный) */
  --color-info-gradient-light: 59, 130, 246;
  --grey-gradient-light: 226, 232, 240;

  /* Admin (зелёный для админских операций) */
  --col-admin: 93, 150, 95;

  /* Tech (красный для технических документов, сдвинут в сторону оранжевого) */
  --col-tech: 205, 114, 94;

  /* Order (синий для редакторских документов) */
  --col-order: 28, 122, 191;

  /* Book (коричневатый для книг) */
  --col-book: 175, 156, 131;

  /* Course (золотистый для курсов) */
  --col-course: 219, 189, 112;

  /* ============================================
     ЦВЕТА — ГРАДИЕНТЫ (автоматически сгенерированы)
     ============================================ */

  /* Generated from --col-admin */
  --col-admin-gr1: 113, 170, 115;

  /* Generated from --col-book */
  --col-book-gr1: 195, 176, 151;

  /* Generated from --col-course */
  --col-course-gr1: 215, 180, 89;

  /* Generated from --col-order */
  --col-order-gr1: 76, 158, 218;

  /* Generated from --col-tech */
  --col-tech-gr1: 218, 138, 120;

  /* Generated from --color-canvas */
  --color-canvas-gr1: 247, 247, 247;

  /* Generated from --color-error */
  --color-error-toast: 255, 176, 166;

  /* Generated from --color-primary-active */
  --color-primary-active-gr1: 39, 149, 230;

  /* Generated from --color-primary */
  --color-primary-gr1: 20, 131, 224;

  /* Generated from --color-success */
  --color-success-gr1: 60, 236, 163;

  /* Generated from --color-success */
  --color-success-toast: 88, 233, 198;

  /* Generated from --grey-100 */
  --grey-100-gr1: 228, 230, 235;

  /* Generated from --grey-400 */
  --grey-400-gr1: 164, 169, 181;

  /* Generated from --grey-50 */
  --grey-50-gr1: 239, 242, 244;


  /* ============================================
     ЦВЕТА — БАЗОВЫЕ
     ============================================ */

  --color-canvas: 255, 255, 255;
  
  --color-text: 26, 26, 26;
  
  --color-text-muted: 107, 114, 128;
  
  --color-text-subtle: 156, 163, 175;

  /* ============================================
     ЦВЕТА — СЕРАЯ ПАЛИТРА
     ============================================ */

  --grey-50: 249, 250, 251;
  --grey-100: 243, 244, 246;
  --grey-200: 229, 231, 235;
  --grey-300: 209, 213, 219;
  --grey-400: 156, 163, 175;
  --grey-500: 107, 114, 128;
  --grey-600: 75, 85, 99;
  --grey-700: 55, 65, 81;
  --grey-800: 31, 41, 55;
  --grey-900: 17, 24, 39;
  --grey-950: 3, 7, 18;




  /* ============================================
     SPACING СИСТЕМА
     ============================================ */

  --space-0: 0;
  --space-1: 10px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Семантические spacing */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-5);
  --space-2xl: var(--space-6);

  /* ============================================
     

  /* ============================================
     ГРАДИЕНТЫ — ГОТОВЫЕ (автоматически сгенерированы)
     ============================================ */

  /* Готовые градиентные токены для унификации градиентов в проекте */

  /* Горизонтальный градиент admin цвета - используется в file-list.css */
  --gradient-admin-horizontal: linear-gradient(to right, var(--col-admin) 0%, var(--col-admin-gr1) 100%);

  /* Диагональный градиент серых оттенков */
  --gradient-grey-diagonal: linear-gradient(135deg, var(--grey-100) 0%, var(--grey-200) 100%);

  /* Вертикальный градиент серых оттенков */
  --gradient-grey-vertical: linear-gradient(135deg, var(--grey-50) 0%, var(--grey-100) 100%);

  /* Горизонтальный градиент order цвета - используется в file-list.css */
  --gradient-order-horizontal: linear-gradient(to right, var(--col-order) 0%, var(--col-order-gr1) 100%);

  /* Диагональный градиент primary-active цвета (135deg) - используется в hover состояниях */
  --gradient-primary-active-diagonal: linear-gradient(135deg, var(--color-primary-active) 0%, var(--color-primary-active-gr1) 50%, var(--color-primary-active) 100%);

  /* Диагональный градиент primary цвета (135deg) - используется в кнопках и border-image */
  --gradient-primary-diagonal: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-gr1) 50%, var(--color-primary) 100%);

  /* Градиент primary цвета с затуханием до прозрачного - используется в декоративных элементах */
  --gradient-primary-fade: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 60%, transparent 100%);

  /* Горизонтальный градиент primary цвета (to right) */
  --gradient-primary-horizontal: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-gr1) 100%);

  /* Диагональный градиент success цвета */
  --gradient-success-diagonal: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-gr1) 100%);

  /* Горизонтальный градиент success цвета - используется в progress bars */
  --gradient-success-horizontal: linear-gradient(90deg, var(--color-success-gr1) 0%, var(--color-success) 100%);

  /* Горизонтальный градиент tech цвета - используется в file-list.css */
  --gradient-tech-horizontal: linear-gradient(to right, var(--col-tech) 0%, var(--col-tech-gr1) 100%);

ТИПОГРАФИКА — РАЗМЕРЫ
     ============================================ */

  /* Fluid sizing через clamp() */
  --fs-display: clamp(56px, 8vw, 128px);
  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(28px, 4.8vw, 48px);
  --fs-h3: clamp(20px, 3.6vw, 32px);
  --fs-h4: clamp(18px, 3vw, 24px);
  --fs-h5: clamp(16px, 2.5vw, 20px);
  --fs-h6: clamp(14px, 2.2vw, 18px);
  --fs-body: clamp(16px, 2.2vw, 19px);
  --fs-body-sm: clamp(14px, 2vw, 16px);
  --fs-caption: clamp(12px, 1.8vw, 14px);

  /* ============================================
     ТИПОГРАФИКА — ВЫСОТА СТРОКИ
     ============================================ */

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.4;
  --lh-relaxed: 1.625;
  --lh-loose: 2;

  /* ============================================
     ТИПОГРАФИКА — ШРИФТОВЫЕ СТЕКИ
     ============================================ */

  /* Body (основной текст) */
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Headings (заголовки H1-H3) */
  --font-headings: 'IBM Plex Sans', system-ui, sans-serif;

  /* Compact (компактные элементы) */
  --font-compact: 'Oswald', 'PT Sans Narrow', 'IBM Plex Sans', system-ui, sans-serif;

  /* Monospace (код, терминал) */
  --font-mono: 'Fira Code', 'Courier New', monospace;

  /* ============================================
     ТИПОГРАФИКА — ВЕСА
     ============================================ */

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ============================================
     РАДИУСЫ (Border Radius)
     ============================================ */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS (тени)
     ============================================ */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(var(--color-text), 0.04);
  --shadow-sm: 0 1px 2px rgba(var(--color-text), 0.06);
  --shadow: 0 1px 3px rgba(var(--color-text), 0.1), 0 1px 2px rgba(var(--color-text), 0.06);
  --shadow-md: 0 4px 6px rgba(var(--color-text), 0.07), 0 2px 4px rgba(var(--color-text), 0.06);
  --shadow-lg: 0 10px 15px rgba(var(--color-text), 0.1), 0 4px 6px rgba(var(--color-text), 0.05);
  --shadow-xl: 0 20px 25px rgba(var(--color-text), 0.1), 0 8px 10px rgba(var(--color-text), 0.04);
  --shadow-2xl: 0 25px 50px rgba(var(--color-text), 0.15);
  --shadow-inner: inset 0 2px 4px rgba(var(--color-text), 0.06);

  /* ============================================
     MOTION — ДЛИТЕЛЬНОСТЬ
     ============================================ */

  --dur-instant: 0ms;
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-slower: 500ms;
  --dur-slowest: 800ms;

  /* ============================================
     MOTION — КРИВЫЕ (Easing)
     ============================================ */

  --easing-linear: linear;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
     LAYOUT — ШИРИНЫ КОНТЕЙНЕРОВ
     ============================================ */

  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1440px;

  /* ============================================
     LAYOUT — Z-INDEX СИСТЕМА
     ============================================ */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;

  /* ============================================
     LAYOUT — GAPS И GUTTERS
     ============================================ */

  --gap: 24px;
  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --gap-xl: 48px;
  --gutter: var(--space-3);

  /* ============================================
     BREAKPOINTS (для использования в JS)
     ============================================ */

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ============================================
     СПЕЦИФИЧНЫЕ ТОКЕНЫ ПРОЕКТА
     ============================================ */

  /* Progress bar */
  --progress-height: 5px;

  /* Input heights */
  --input-height-sm: 32px;
  --input-height: 40px;
  --input-height-lg: 48px;

  /* ============================================
     ЦВЕТА — ПОЛЯ ВВОДА (Form Controls)
     ============================================ */
  
  --input-bg: var(--color-canvas);
  --input-bg-hover: var(--grey-50);
  --input-bg-active: var(--color-canvas);
  --input-text: var(--color-text);
  --input-border: var(--grey-300);
  --input-placeholder: var(--grey-400);
  --input-focus-border: var(--color-primary);
  --input-disabled-bg: var(--grey-100);
  --input-disabled-text: var(--grey-500);

  /* Button paddings */
  --btn-padding-x-sm: 12px;
  --btn-padding-y-sm: 6px;
  --btn-padding-x: 18px;
  --btn-padding-y: 12px;
  --btn-padding-x-lg: 24px;
  --btn-padding-y-lg: 16px;

  /* @deprecated Legacy component variables. Will be removed in v2.0 */
  --prg-bar-h: 5px;
  --search-buttons-border: 3px solid rgb(var(--grey-300));

  /* ============================================
     LEGACY OPACITY ТОКЕНЫ (DEPRECATED)
     Используйте новые токены! Эти будут удалены в v2.0
     ============================================ */

  /* @deprecated Use explicit opacity values instead. Will be removed in v2.0 */
  --col-list-opacity: 0.75;
  --col-font-opacity: 0.8;

}

/* ============================================
   ACCESSIBILITY — REDUCE MOTION
   ============================================ */

/* ============================================
   DARK MODE — data-theme="dark"
   ============================================ */

:root[data-theme="dark"] {
    /* ============================================
       ЦВЕТА — БРЕНДОВЫЕ (темные значения)
       ============================================ */

    --color-primary: 29, 125, 207;

    --color-primary-hover: 78, 237, 255;

    --color-primary-active: 39, 170, 255;

    --color-navy: 21, 64, 105;

    --color-primary-active-gr1: 54, 208, 255;

    --color-primary-gr1: 28, 183, 255;

    /* ============================================
       ЦВЕТА — СТАТУСНЫЕ (темные значения)
       ============================================ */

    --color-success: 35, 255, 175;

    --color-error: 255, 152, 125;

    --color-warning: 255, 221, 15;

    --color-info: 82, 182, 255;

    --color-success-soft: 112, 224, 182;

    --color-error-soft: 255, 196, 182;

    --color-warning-soft: 255, 230, 125;

    --col-admin: 130, 210, 133;

    --col-tech: 255, 159, 131;

    --col-order: 39, 170, 255;

    --col-admin-gr1: 158, 237, 161;

    --col-order-gr1: 106, 221, 255;

    --col-tech-gr1: 255, 193, 168;

    --color-error-toast: 255, 246, 232;

    --color-success-gr1: 84, 255, 228;

    --color-success-toast: 123, 255, 255;

    /* ============================================
       ЦВЕТА — БАЗОВЫЕ (темные значения)
       ============================================ */

    --color-canvas: 0, 0, 0;

    --color-text: 229, 229, 229;

    --color-text-muted: 148, 141, 127;

    --color-text-subtle: 99, 92, 80;

    --color-canvas-gr1: 8, 8, 8;

    /* ============================================
       ЦВЕТА — СЕРАЯ ПАЛИТРА (инвертирована)
       ============================================ */

    --grey-50: 3, 7, 18;

    --grey-50-gr1: 17, 24, 39;

    --grey-100: 31, 41, 55;

    --grey-100-gr1: 55, 65, 81;

    --grey-200: 75, 85, 99;

    --grey-300: 107, 114, 128;

    --grey-400: 164, 169, 181;

    --grey-400-gr1: 156, 163, 175;

    --grey-500: 209, 213, 219;

    --grey-600: 229, 231, 235;

    --grey-700: 228, 230, 235;

    --grey-800: 243, 244, 246;

    --grey-900: 239, 242, 244;

    --grey-950: 249, 250, 251;
    --color-primary: 32, 92, 100;
    --color-primary-hover: 58, 150, 160;
    --color-primary-active: 46, 120, 130;
    --color-primary-active-gr1: 65, 170, 180;
    --color-primary-gr1: 38, 103, 110;
    --color-primary-light: 60, 110, 130;
    --color-primary-gradient-light: 78, 237, 255;
    --color-primary-gradient-dark: 39, 170, 255;
    --color-success-gradient-light: 84, 255, 228;
    --color-success-soft: 100, 180, 150;
    --color-error-gradient-light: 255, 193, 168;
    --color-error-soft: 240, 160, 150;
    --color-warning-soft: 220, 170, 120;
    --color-info-gradient-light: 82, 182, 255;
    --grey-gradient-light: 230, 218, 202;
    --grey-50: 14, 11, 10;
    --grey-50-gr1: 20, 17, 15;
    --grey-100: 30, 25, 22;
    --grey-100-gr1: 42, 37, 32;
    --grey-200: 56, 50, 44;
    --grey-300: 72, 64, 56;
    --grey-400: 105, 95, 85;
    --grey-400-gr1: 115, 104, 93;
    --grey-500: 152, 140, 125;
    --grey-600: 178, 166, 150;
    --grey-700: 210, 196, 180;
    --grey-800: 230, 218, 202;
    --grey-900: 243, 232, 218;
    --grey-950: 251, 248, 242;
    --input-bg: var(--grey-100);
    --input-bg-hover: var(--grey-200);
    --input-bg-active: var(--grey-200);
    --input-text: var(--grey-700);
    --input-border: var(--grey-400);
    --input-placeholder: var(--grey-500);
    --input-focus-border: var(--color-primary);
    --input-disabled-bg: var(--grey-100);
    --input-disabled-text: var(--grey-500);

}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Отключить все анимации для пользователей с motion sensitivity */
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
    --dur-slowest: 0ms;
  }
}