/* ============================================================
   Design Tokens — единый источник правды для всех стилей.

   Подключается ПЕРВЫМ перед theme.css.
   Все цвета, шрифты, отступы, тени, радиусы — только здесь.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     Цвета: нейтральные
     -------------------------------------------------------- */
  --c-bg:          #f6f8fb;
  --c-bg-raised:   #f8fbff;      /* чуть светлее bg — для вложенных карт */
  --c-panel:       #ffffff;
  --c-panel-2:     #fbfcfe;
  --c-ink:         #0e1422;
  --c-ink-soft:    #34465b;
  --c-muted:       #5f6b80;
  --c-muted-soft:  #8a99ae;
  --c-muted-soft-rgb: 138, 153, 174;   /* для rgba() */
  --c-line:        #e6ebf2;
  --c-line-soft:   #f1f4f9;
  --c-panel-rgb:   255, 255, 255;      /* для rgba() */

  /* --------------------------------------------------------
     Цвета: акценты (OZON palette + сигналы)
     -------------------------------------------------------- */
  --c-blue:        #005bff;
  --c-blue-hover:  #0044c2;
  --c-blue-bg:     #e7efff;
  --c-blue-bg-s:   #dbeafe;       /* stronger blue bg */
  --c-blue-ink:    #ffffff;

  --c-green:       #237a57;
  --c-green-hover: #065f46;
  --c-green-bg:    #e8f5ee;
  --c-green-bg-s:  #d1fae5;

  --c-red:         #b43b3b;
  --c-red-hover:   #b91c1c;
  --c-red-bg:      #fdecec;
  --c-red-bg-s:    #fee2e2;

  --c-orange:      #c46b2d;
  --c-orange-hover:#ea580c;
  --c-orange-bg:   #fff3df;
  --c-orange-bg-s: #ffedd5;

  --c-violet:      #6f4aa8;
  --c-violet-hover:#9333ea;
  --c-violet-bg:   #f3e8ff;
  --c-violet-bg-s: #d8b4fe;

  --c-teal:        #1d7b83;
  --c-teal-hover:  #047857;
  --c-teal-bg:     #ecfdf5;

  --c-yellow:      #c79214;
  --c-yellow-bg:   #fef3c7;

  /* --------------------------------------------------------
     Цвета: семантические (alias → акцент)
     -------------------------------------------------------- */
  --c-success:     var(--c-green);
  --c-success-bg:  var(--c-green-bg);
  --c-danger:      var(--c-red);
  --c-danger-bg:   var(--c-red-bg);
  --c-warning:     var(--c-orange);
  --c-warning-bg:  var(--c-orange-bg);
  --c-info:        var(--c-blue);
  --c-info-bg:     var(--c-blue-bg);

  /* --------------------------------------------------------
     Оверлеи и полупрозрачности
     -------------------------------------------------------- */
  --overlay-light: rgba(255, 255, 255, .96);
  --overlay-panel: rgba(248, 251, 255, .97);
  --overlay-blue:  rgba(37, 99, 235, .08);
  --overlay-red:   rgba(239, 68, 68, .08);
  --overlay-green: rgba(16, 185, 129, .08);
  --overlay-line:  rgba(205, 218, 236, .80);
  --overlay-dark:  rgba(20, 35, 55, .45);

  /* --------------------------------------------------------
     Шрифтовые семейства
     -------------------------------------------------------- */
  --ff-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --ff-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --ff-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --------------------------------------------------------
     Типографика: шкала
     (base=14px, ratio≈1.2 minor third)
     -------------------------------------------------------- */
  --fs-xs:    10px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   26px;
  --fs-3xl:   34px;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* --------------------------------------------------------
     Пространство: шкала на базе 4px
     -------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;

  /* --------------------------------------------------------
     Тени
     -------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(20, 35, 55, .04);
  --shadow-sm:  0 1px 3px rgba(20, 35, 55, .06);
  --shadow-md:  0 4px 12px rgba(23, 42, 69, .08);
  --shadow-lg:  0 10px 24px rgba(23, 42, 69, .10);
  --shadow-xl:  0 14px 34px rgba(23, 42, 69, .12);

  /* --------------------------------------------------------
     Радиусы
     -------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 9999px;

  /* --------------------------------------------------------
     Анимации
     -------------------------------------------------------- */
  --ease-out:  cubic-bezier(.4, 0, .2, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --ease-snap: cubic-bezier(.2, 0, 0, 1);

  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;

  /* --------------------------------------------------------
     Layout
     -------------------------------------------------------- */
  --sidebar-w: 224px;
  --header-h:  56px;
  --drawer-w:  420px;

  --bp-sm:  640px;
  --bp-md:  900px;
  --bp-lg:  1200px;

  /* --------------------------------------------------------
     Z-index шкала
     -------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   10;
  --z-drawer:   50;
  --z-modal:    60;
  --z-toast:    100;
}

/* ============================================================
   Dark mode — ВРЕМЕННО ОТКЛЮЧЕНА.
   Page-specific CSS (dashboard_v3.css, inventory.css, settings.css)
   ещё содержит много hardcoded rgba(255,255,255,*) и других светлых
   значений, поэтому темная тема выглядит ломанной. Включим обратно
   после прохода по постраничным стилям (Phase 2 или 3).

   Чтобы временно включить локально для тестов — раскомментировать
   блок ниже. Переключатель темы в топбаре тоже отключён в _base.html.
   ============================================================ */

[data-theme="__disabled__dark"] {
  --c-bg:          #0a0d12;
  --c-bg-raised:   #11151c;
  --c-panel:       #11151c;
  --c-panel-2:     #161b24;
  --c-ink:         #e4e8ef;
  --c-ink-soft:    #b0b8c8;
  --c-muted:       #8a99ae;
  --c-muted-soft:  #5a657a;
  --c-muted-soft-rgb: 90, 101, 122;
  --c-line:        rgba(255, 255, 255, .08);
  --c-line-soft:   rgba(255, 255, 255, .04);
  --c-panel-rgb:   17, 21, 28;

  --c-blue:        #3b82f6;
  --c-blue-hover:  #60a5fa;
  --c-blue-bg:     rgba(59, 130, 246, .14);
  --c-blue-bg-s:   rgba(59, 130, 246, .22);
  --c-blue-ink:    #ffffff;

  --c-green:       #34d399;
  --c-green-hover: #6ee7b7;
  --c-green-bg:    rgba(52, 211, 153, .12);
  --c-green-bg-s:  rgba(52, 211, 153, .18);

  --c-red:         #f87171;
  --c-red-hover:   #fca5a5;
  --c-red-bg:      rgba(248, 113, 113, .12);
  --c-red-bg-s:    rgba(248, 113, 113, .18);

  --c-orange:      #fb923c;
  --c-orange-hover:#fdba74;
  --c-orange-bg:   rgba(251, 146, 60, .12);
  --c-orange-bg-s: rgba(251, 146, 60, .18);

  --c-violet:      #a78bfa;
  --c-violet-hover:#c4b5fd;
  --c-violet-bg:   rgba(167, 139, 250, .12);
  --c-violet-bg-s: rgba(167, 139, 250, .18);

  --c-teal:        #2dd4bf;
  --c-teal-hover:  #5eead4;
  --c-teal-bg:     rgba(45, 212, 191, .12);

  --c-yellow:      #fbbf24;
  --c-yellow-bg:   rgba(251, 191, 36, .14);

  --overlay-light: rgba(17, 21, 28, .94);
  --overlay-panel: rgba(22, 27, 36, .96);
  --overlay-line:  rgba(255, 255, 255, .12);
  --overlay-dark:  rgba(0, 0, 0, .55);

  --shadow-xs:  0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-sm:  0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-md:  0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-lg:  0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .50);
  --shadow-xl:  0 0 0 1px rgba(255, 255, 255, .08), 0 24px 48px rgba(0, 0, 0, .55);
}

/* ============================================================
   Утилитарные классы (text, spacing, flex)
   ============================================================ */

/* Текст */
.text-muted    { color: var(--c-muted) !important; }
.text-soft     { color: var(--c-muted-soft) !important; }
.text-ink      { color: var(--c-ink) !important; }
.text-success  { color: var(--c-success) !important; }
.text-danger   { color: var(--c-danger) !important; }
.text-warning  { color: var(--c-warning) !important; }
.text-info     { color: var(--c-blue) !important; }
.text-good     { color: var(--c-green) !important; }
.text-bad      { color: var(--c-red) !important; }

/* Размеры шрифтов */
.fs-xs    { font-size: var(--fs-xs) !important; }
.fs-sm    { font-size: var(--fs-sm) !important; }
.fs-base  { font-size: var(--fs-base) !important; }
.fs-md    { font-size: var(--fs-md) !important; }
.fs-lg    { font-size: var(--fs-lg) !important; }
.fs-xl    { font-size: var(--fs-xl) !important; }

/* Вес */
.fw-normal { font-weight: var(--fw-normal) !important; }
.fw-medium { font-weight: var(--fw-medium) !important; }
.fw-semi   { font-weight: var(--fw-semi) !important; }
.fw-bold   { font-weight: var(--fw-bold) !important; }

/* Flex */
.flex       { display: flex !important; }
.flex-col   { flex-direction: column !important; }
.flex-wrap  { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.flex-1     { flex: 1 !important; }
.gap-1      { gap: var(--sp-1) !important; }
.gap-2      { gap: var(--sp-2) !important; }
.gap-3      { gap: var(--sp-3) !important; }
.gap-4      { gap: var(--sp-4) !important; }
.gap-6      { gap: var(--sp-6) !important; }

/* Margin */
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--sp-1) !important; }
.mt-2  { margin-top: var(--sp-2) !important; }
.mt-3  { margin-top: var(--sp-3) !important; }
.mt-4  { margin-top: var(--sp-4) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: var(--sp-2) !important; }
.mb-3  { margin-bottom: var(--sp-3) !important; }
.mr-2  { margin-right: var(--sp-2) !important; }
.ml-2  { margin-left: var(--sp-2) !important; }

/* Padding */
.p-0   { padding: 0 !important; }
.p-2   { padding: var(--sp-2) !important; }
.p-3   { padding: var(--sp-3) !important; }
.p-4   { padding: var(--sp-4) !important; }
.px-3  { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.px-4  { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.py-2  { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3  { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }

/* Width */
.w-full { width: 100% !important; }

/* Display */
.hidden       { display: none !important; }
.block        { display: block !important; }
.inline-block { display: inline-block !important; }

/* Cursor */
.clickable    { cursor: pointer !important; }

/* Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SVG-иконки */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Визуально скрытый, но доступный для screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Reduced motion — accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}