/* ============================================================================
 *  variables.css — дизайн-система: токены (CSS-переменные)
 * ----------------------------------------------------------------------------
 *  Единый источник правды для цветов, теней, радиусов, типографики и размеров.
 *  Подключается первым, до base.css и components.css.
 *  Шрифт: Inter. Иконки: Phosphor Icons (CDN подключается в шаблоне).
 * ========================================================================== */

/* Шрифт Inter подключается <link>-ом в шаблоне (assets/vendor/fonts/inter.css).
   @import отсюда убран: он выстраивал 4 последовательных запроса до первого пикселя. */

:root {
  /* --- Акцентный — основной бренд ----------------------------------------- */
  --color-primary:       #FF5C00;   /* Яркий оранжевый — CTA, кнопки, акценты */
  --color-primary-light: #FF8C42;   /* Hover-состояние */
  --color-primary-dark:  #CC4A00;   /* Active/pressed */
  --color-primary-bg:    #FFF3EC;   /* Лёгкий фон под акцент (бейджи, алерты) */
  --color-primary-rgb:   255, 92, 0;/* для rgba() теней и колец фокуса */

  /* --- Нейтральные --------------------------------------------------------- */
  --color-dark:          #1A1A2E;   /* Заголовки, основной текст */
  --color-text:          #2D2D3A;   /* Обычный текст */
  --color-text-muted:    #6B7280;   /* Подписи, плейсхолдеры */
  --color-text-light:    #9CA3AF;   /* Вторичные подписи */

  /* --- Фоны ---------------------------------------------------------------- */
  --color-bg:            #F8F9FB;   /* Фон страницы */
  --color-surface:       #FFFFFF;   /* Карточки, модальные окна */
  --color-surface-2:     #F3F4F6;   /* Вложенные поверхности */

  /* --- Границы ------------------------------------------------------------- */
  --color-border:        #E5E7EB;   /* Стандартная граница */
  --color-border-light:  #F3F4F6;   /* Лёгкая граница */

  /* --- Семантические ------------------------------------------------------- */
  --color-success:       #10B981;
  --color-success-bg:    #ECFDF5;
  --color-success-text:  #059669;
  --color-warning:       #F59E0B;
  --color-warning-bg:    #FFFBEB;
  --color-warning-text:  #D97706;
  --color-danger:        #EF4444;
  --color-danger-bg:     #FEF2F2;
  --color-danger-text:   #DC2626;
  --color-info:          #3B82F6;
  --color-info-bg:       #EFF6FF;
  --color-info-text:     #2563EB;

  /* --- Тени -----------------------------------------------------------------
   *  Многослойные и слегка синеватые, а не чисто чёрные: чёрная тень на светлом
   *  фоне выглядит грязным пятном, из-за этого интерфейс кажется дешевле, чем он
   *  есть. Первый слой — контактная тень (объект «касается» фона), второй —
   *  мягкий ореол. Так делают Ozon, Stripe, Linear.
   * ------------------------------------------------------------------------ */
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md:   0 2px 4px -1px rgba(16, 24, 40, 0.06), 0 4px 12px -2px rgba(16, 24, 40, 0.08);
  --shadow-lg:   0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 16px 32px -8px rgba(16, 24, 40, 0.14);
  --shadow-xl:   0 8px 16px -4px rgba(16, 24, 40, 0.06), 0 28px 56px -12px rgba(16, 24, 40, 0.18);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px -2px rgba(16, 24, 40, 0.06);
  /* Акцентная тень приглушена: прежний оранжевый ореол 0.35 «светился» и старил макет */
  --shadow-primary: 0 1px 2px rgba(var(--color-primary-rgb), 0.24), 0 6px 16px -4px rgba(var(--color-primary-rgb), 0.30);

  /* --- Кольцо фокуса (доступность с клавиатуры) ---------------------------- */
  --ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.28);

  /* --- Радиусы ------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Переходы ------------------------------------------------------------ */
  --transition:      all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* Для движения (сдвиг, масштаб): лёгкий «доводчик» в конце — движение читается
     как отклик интерфейса, а не как анимация ради анимации. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Типографика --------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-h1:   2rem;       /* 32px */
  --fs-h2:   1.5rem;     /* 24px */
  --fs-h3:   1.25rem;    /* 20px */
  --fs-h4:   1rem;       /* 16px */
  --fs-xl:   1.125rem;   /* 18px */
  --fs-base: 1rem;       /* 16px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-xs:   0.75rem;    /* 12px */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Отступы (шкала 4px) ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Размеры макета ------------------------------------------------------ */
  --header-height:        64px;   /* десктоп */
  --header-height-mobile: 56px;
  --sidebar-width:        260px;
  --container-max:        1280px;
  --content-max:          1024px;

  /* --- Слои (z-index) ------------------------------------------------------ */
  --z-header:      100;
  --z-sidebar:     90;
  --z-dropdown:    200;
  --z-sheet:       300;
  --z-modal:       400;
  --z-toast:       500;
}

/* --- Тёмная тема (активируется data-theme="dark" на <html>) --------------- */
[data-theme="dark"] {
  --color-dark:         #FFFFFF;
  --color-text:         #E8E8F0;
  --color-text-muted:   #9CA3AF;
  --color-text-light:   #6B7280;
  --color-bg:           #0F0F1A;
  --color-surface:      #1A1A2E;
  --color-surface-2:    #252540;
  --color-border:       #2D2D4A;
  --color-border-light: #232338;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
}