/* ═══════════════════════════════════════════════════════════════
   NEOIT Design Tokens
   Единый фундамент визуальной системы.
   Только CSS-переменные. Никаких классов и селекторов.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────
     УРОВЕНЬ 1: БАЗОВАЯ ПАЛИТРА
     Источник: аудит 109 hex-цветов проекта, сведённых к системе.
     ───────────────────────────────────────────────────────────── */

  /* Purple (фирменный) */
  --purple-50:  #f3e5f5;
  --purple-100: #e1bee7;
  --purple-200: #ce93d8;
  --purple-400: #9c27b0;
  --purple-500: #7b1fa2;
  --purple-600: #6a1b9a;  /* ← основной фирменный */
  --purple-700: #4a148c;
  --purple-800: #38006b;

  /* Neutral (текст, фоны, границы) */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-150: #eeeeee;
  --neutral-200: #e0e0e0;
  --neutral-300: #bdbdbd;
  --neutral-400: #9e9e9e;
  --neutral-500: #757575;
  --neutral-600: #616161;
  --neutral-700: #424242;
  --neutral-800: #333333;
  --neutral-900: #212121;

  /* Blue (info, Ozon) */
  --blue-50:  #e3f2fd;
  --blue-100: #bbdefb;
  --blue-200: #90caf9;
  --blue-500: #2196f3;
  --blue-600: #1976d2;
  --blue-700: #1565c0;
  --blue-800: #0d47a1;

  /* Green (success) */
  --green-50:  #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-500: #4caf50;
  --green-600: #388e3c;
  --green-700: #2e7d32;
  --green-800: #1b5e20;

  /* Orange (warning) */
  --orange-50:  #fff3e0;
  --orange-100: #ffe0b2;
  --orange-200: #ffcc80;
  --orange-500: #ff9800;
  --orange-600: #f57c00;
  --orange-700: #e65100;

  /* Red (error, danger) */
  --red-50:  #ffebee;
  --red-100: #ffcdd2;
  --red-200: #ef9a9a;
  --red-500: #f44336;
  --red-600: #e53935;
  --red-700: #d32f2f;
  --red-800: #c62828;


  /* ─────────────────────────────────────────────────────────────
     УРОВЕНЬ 2: СЕМАНТИЧЕСКИЕ ТОКЕНЫ
     Компоненты используют именно эти переменные.
     ───────────────────────────────────────────────────────────── */

  /* Primary (управляющий акцент) */
  --color-primary:        var(--purple-600);
  --color-primary-hover:  var(--purple-700);
  --color-primary-active: var(--purple-800);
  --color-primary-soft:   var(--purple-50);
  --color-on-primary:     var(--neutral-0);

  /* Текст */
  --color-text-primary:   var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-500);
  --color-text-disabled:  var(--neutral-400);
  --color-text-inverse:   var(--neutral-0);
  --color-text-link:      var(--purple-600);
  --color-text-link-hover: var(--purple-700);

  /* Фоны и поверхности */
  --color-background:         var(--neutral-100);
  --color-surface:            var(--neutral-0);
  --color-surface-secondary:  var(--neutral-50);
  --color-surface-hover:      var(--neutral-100);
  --color-surface-disabled:   var(--neutral-100);

  /* Границы */
  --color-border:          var(--neutral-200);
  --color-border-strong:   var(--neutral-300);
  --color-border-focus:    var(--purple-600);
  --color-border-disabled: var(--neutral-200);

  /* Success */
  --color-success:      var(--green-700);
  --color-success-soft: var(--green-50);
  --color-success-text: var(--green-800);

  /* Warning */
  --color-warning:      var(--orange-600);
  --color-warning-soft: var(--orange-50);
  --color-warning-text: var(--orange-700);

  /* Error */
  --color-error:      var(--red-700);
  --color-error-soft: var(--red-50);
  --color-error-text: var(--red-800);

  /* Info */
  --color-info:      var(--blue-700);
  --color-info-soft: var(--blue-50);
  --color-info-text: var(--blue-800);

  /* Каналы продаж */
  --channel-wb:              var(--purple-600);
  --channel-wb-soft:         var(--purple-50);
  --channel-ozon:            var(--blue-700);
  --channel-ozon-soft:       var(--blue-50);
  --channel-yandex-market:   #f57f17;
  --channel-yandex-market-soft: #fff8e1;
  --channel-website:         var(--green-600);
  --channel-website-soft:    var(--green-50);


  /* ─────────────────────────────────────────────────────────────
     ТИПОГРАФИЯ
     ───────────────────────────────────────────────────────────── */

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-md:  13px;
  --font-size-lg:  15px;
  --font-size-xl:  18px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:   1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;


  /* ─────────────────────────────────────────────────────────────
     SPACING (шаг 4px)
     ───────────────────────────────────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;


  /* ─────────────────────────────────────────────────────────────
     РАДИУСЫ
     ───────────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;


  /* ─────────────────────────────────────────────────────────────
     ТЕНИ
     ───────────────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);


  /* ─────────────────────────────────────────────────────────────
     CONTROL HEIGHTS (элементы управления)
     ───────────────────────────────────────────────────────────── */

  --control-height-sm: 28px;
  --control-height-md: 34px;
  --control-height-lg: 42px;


  /* ─────────────────────────────────────────────────────────────
     FOCUS
     ───────────────────────────────────────────────────────────── */

  --focus-ring: 0 0 0 2px var(--purple-50), 0 0 0 4px var(--purple-600);


  /* ─────────────────────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────────────────────── */

  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;


  /* ─────────────────────────────────────────────────────────────
     УРОВЕНЬ 3: КОМПОНЕНТНЫЕ ТОКЕНЫ
     Подготовлены для css/components.css (Фаза B).
     Не создают визуальных изменений до использования.
     ───────────────────────────────────────────────────────────── */

  /* Кнопки — Primary */
  --button-primary-bg:        var(--color-primary);
  --button-primary-bg-hover:  var(--color-primary-hover);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-text:      var(--color-on-primary);
  --button-primary-border:    transparent;

  /* Кнопки — Secondary */
  --button-secondary-bg:        var(--neutral-0);
  --button-secondary-bg-hover:  var(--neutral-100);
  --button-secondary-text:      var(--color-text-primary);
  --button-secondary-border:    var(--color-border);

  /* Кнопки — Danger */
  --button-danger-bg:        var(--red-700);
  --button-danger-bg-hover:  var(--red-800);
  --button-danger-text:      var(--neutral-0);
  --button-danger-border:    transparent;

  /* Кнопки — Ghost */
  --button-ghost-bg:         transparent;
  --button-ghost-bg-hover:   var(--neutral-100);
  --button-ghost-text:       var(--color-text-primary);
  --button-ghost-border:     transparent;

  /* Кнопки — Disabled */
  --button-disabled-bg:      var(--neutral-100);
  --button-disabled-text:    var(--neutral-400);
  --button-disabled-border:  var(--neutral-200);

  /* Поля форм */
  --input-bg:            var(--neutral-0);
  --input-text:          var(--color-text-primary);
  --input-placeholder:   var(--neutral-400);
  --input-border:        var(--color-border);
  --input-border-hover:  var(--neutral-300);
  --input-border-focus:  var(--color-border-focus);
  --input-border-error:  var(--color-error);
  --input-disabled-bg:   var(--neutral-100);

  /* Карточки */
  --card-bg:     var(--color-surface);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-sm);

  /* Таблицы (совместимость с TableComponent) */
  --table-header-bg:   var(--neutral-50);
  --table-header-text: var(--color-text-secondary);
  --table-row-bg:      var(--neutral-0);
  --table-row-hover-bg: var(--neutral-50);
  --table-border:      var(--neutral-200);

  /* Toast / уведомления */
  --toast-success-bg:     var(--color-success-soft);
  --toast-success-border: var(--green-200);
  --toast-success-text:   var(--color-success-text);

  --toast-warning-bg:     var(--color-warning-soft);
  --toast-warning-border: var(--orange-200);
  --toast-warning-text:   var(--color-warning-text);

  --toast-error-bg:       var(--color-error-soft);
  --toast-error-border:   var(--red-200);
  --toast-error-text:     var(--color-error-text);

  --toast-info-bg:        var(--color-info-soft);
  --toast-info-border:    var(--blue-200);
  --toast-info-text:      var(--color-info-text);

  --toast-radius:         var(--radius-md);
  --toast-shadow:         var(--shadow-md);
  --toast-width:          380px;

  /* Модальные окна */
  --modal-bg:      var(--color-surface);
  --modal-border:  var(--color-border);
  --modal-shadow:  var(--shadow-lg);
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-width-sm: 400px;
  --modal-width-md: 560px;
  --modal-width-lg: 720px;
  --modal-radius:   var(--radius-lg);

  /* Badges */
  --badge-font-size:  var(--font-size-xs);
  --badge-font-weight: var(--font-weight-medium);
  --badge-padding:    2px 8px;
  --badge-radius:     var(--radius-full);

  /* Form controls */
  --input-height:        var(--control-height-md);
  --input-height-sm:     var(--control-height-sm);
  --input-height-lg:     var(--control-height-lg);
  --input-radius:        var(--radius-md);
  --input-font-size:     var(--font-size-md);
  --input-padding-x:     var(--space-3);

  /* States */
  --state-loading-color: var(--neutral-400);
  --state-empty-color:   var(--neutral-500);
}