/* ═══════════════════════════════════════════════════════════════
   ANRO — Design Tokens (Step 1 of 7-step design lock)
   Load BEFORE dashboard.css. All magic numbers live here.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Status colors (semantic) — used by amazon-review flags, badges */
  --good: #16a34a;  --good-bg: rgba(34,197,94,.14);
  --warn: #d97706;  --warn-bg: rgba(251,191,36,.16);
  --bad:  #dc2626;  --bad-bg:  rgba(248,113,113,.14);
  /* Radii */
  --radius-pill: 20px;
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-button: 8px;
  --radius-badge: 6px;
  --radius-xs: 3px;
  --radius-circle: 50%;

  /* Brand & state colors */
  --color-accent: #3b82f6;   /* синий — primary */
  --color-good:   #10b981;   /* зелёный — success/online */
  --color-warn:   #f59e0b;   /* оранжевый — warning */
  --color-bad:    #ef4444;   /* красный — error/offline */
  --color-neu:    #64748b;   /* slate — neutral */
  --color-violet: #8b5cf6;
  /* Marketplace brand colors (для акцентов сайдбара) */
  --brand-kaufland: #F07800;
  --brand-amazon:   #FF9900;
  --brand-ebay:     #0064D2;
  --brand-otto:     #CC0000;
  --color-text:        #1e293b;
  --color-text-muted:  #64748b;
  --color-bg:          #ffffff;
  --color-bg-soft:     #f8fafc;
  --color-border:      #e2e8f0;
  --color-border-strong: #94a3b8;
  --border-accent-w: 3px;  /* accent left-border width for info panels */

  /* Elevated surfaces + brand accent — used by modals, cards и атомы
     .adsb-/.aar-/.cron- (раньше были не определены → прозрачный фон модалок). */
  --surface-1: #ffffff;   /* карточка/модалка (поднятая поверхность) */
  --surface-2: #f1f5f9;   /* subtle-фон поверх surface-1 */
  --brand:     #2563eb;   /* акцент ссылок/выделений */

  /* Spacing scale (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px;

  /* Typography */
  --fs-4xs: 8px; --fs-3xs: 9px; --fs-2xs: 10px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-2sm: 13px; --fs-md: 14px;
  --fs-1lg: 18px; --fs-lg: 16px; --fs-xl: 20px; --fs-section: 22px;
  --fs-2xl: 24px; --fs-card-num: 26px; --fs-3xl: 28px;
  --fs-hero: 40px; --fs-display: 72px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10);

  /* Table column widths */
  --col-title-max: 200px;   /* max-width for title/name columns in tables */

  /* Modal size variants */
  --modal-md-w: 540px;      /* .modal.modal-md */

  /* Vendor cartons */
  --vdnd-drag-cell-w: 1.5rem;   /* drag handle column width */
  --space-px: 2px;               /* 1 pixel step */
  --vcarton-bar-h: 6px;          /* высота полосы заполнения коробки */
  --vcarton-fill-min-w: 170px;   /* мин. ширина блока веса с полосой */
  --vtoast-min-w: 13rem;         /* фиксированный тост */
  --vtoast-max-w: 24rem;

  /* Каталог */
  --cat-thumb: 64px;             /* превью SKU в карточке каталога */
  --cat-pane-h: 62vh;            /* высота скролл-панелей каталога (дерево / SKU) */

  /* Видеостена /cctv — минимальная ширина плитки для трёх масштабов */
  --cctv-tile-s: 180px;
  --cctv-tile-m: 280px;
  --cctv-tile-l: 420px;
}

/* Тёмная тема: поднятые поверхности + акцент */
html.dark {
  --surface-1: #0f172a;
  --surface-2: #1e293b;
  --brand:     #60a5fa;
  --good: #22c55e;  --good-bg: rgba(34,197,94,.16);
  --warn: #fbbf24;  --warn-bg: rgba(251,191,36,.16);
  --bad:  #f87171;  --bad-bg:  rgba(248,113,113,.16);
}