/*
 * Stockshop UI — Design Tokens
 * ----------------------------------------------------------------------------
 * Canonical CSS variables for every service in the ecosystem. Подключается
 * из любого vhost через /shared/design/tokens.css.
 *
 * Сервисам ЗАПРЕЩЕНО переопределять `--ui-*` переменные. Свои бренд-цвета
 * заводятся под собственным префиксом (`--admin-*`, `--cockpit-*`).
 *
 * См. /shared/README.md раздел 2.3 для контракта.
 *
 * ─── Как устроен набор ──────────────────────────────────────────────────────
 * 1. Нейтральная шкала `--ui-neutral-*` — единственный источник серого.
 *    Оттенок холодный (slate): серый уведён в сторону синего акцента, поэтому
 *    он читается как выбранный, а не как случайный «средний серый».
 * 2. Семантические имена (`--ui-surface`, `--ui-color-text`) ссылаются на
 *    шкалу. Компоненты используют ТОЛЬКО семантические имена — тогда смена
 *    палитры не требует правки компонентов.
 * 3. Состояния (success / warning / danger) — это состояния, а не акценты.
 *    Акцент в системе один: `--ui-color-primary`.
 *
 * Совместимость: все имена, существовавшие до 2026-09-11, сохранены.
 */
:root {
    /* ── Нейтральная шкала (slate-уклон) ─────────────────────────────── */
    --ui-neutral-0:   #ffffff;
    --ui-neutral-50:  #f8fafc;
    --ui-neutral-100: #f1f5f9;
    --ui-neutral-200: #e2e8f0;
    --ui-neutral-300: #cbd5e1;
    --ui-neutral-400: #94a3b8;
    --ui-neutral-500: #64748b;
    --ui-neutral-600: #475569;
    --ui-neutral-700: #334155;
    --ui-neutral-800: #1e293b;
    --ui-neutral-900: #0f172a;

    /* ── Поверхности ─────────────────────────────────────────────────── */
    --ui-surface:        var(--ui-neutral-0);    /* карточка, модалка, шапка */
    --ui-surface-sunken: var(--ui-neutral-50);   /* шапка таблицы, тулбар    */
    --ui-surface-muted:  var(--ui-neutral-100);  /* hover, чип, заливка      */
    --ui-ground:         #eef1f6;                /* фон рабочей области      */

    /* Легаси-имена поверхностей (были до 2026-09-11) */
    --ui-color-bg:       var(--ui-surface);
    --ui-color-bg-alt:   var(--ui-surface-sunken);
    --ui-color-bg-muted: var(--ui-surface-muted);

    /* ── Текст ───────────────────────────────────────────────────────── */
    --ui-color-text:           var(--ui-neutral-900);
    --ui-color-text-secondary: var(--ui-neutral-700);
    --ui-color-text-muted:     var(--ui-neutral-500);
    --ui-color-text-faint:     var(--ui-neutral-400);
    --ui-color-text-inverse:   var(--ui-neutral-0);

    /* ── Границы ─────────────────────────────────────────────────────── */
    --ui-border-color:         var(--ui-neutral-200);
    --ui-border-color-hover:   var(--ui-neutral-300);
    --ui-border-color-strong:  var(--ui-neutral-400);

    /* ── Акцент ──────────────────────────────────────────────────────── */
    --ui-color-primary:        #2563eb;   /* blue-600  */
    --ui-color-primary-hover:  #1d4ed8;   /* blue-700  */
    --ui-color-primary-soft:   #eff6ff;   /* blue-50   */
    --ui-color-primary-border: #bfdbfe;   /* blue-200  */
    --ui-color-indigo:         #4f46e5;   /* пара к акценту в градиенте */

    /* ── Состояния ───────────────────────────────────────────────────── */
    --ui-color-success:        #10b981;
    --ui-color-success-strong: #047857;
    --ui-color-success-soft:   #ecfdf5;
    --ui-color-warning:        #f59e0b;
    --ui-color-warning-strong: #b45309;
    --ui-color-warning-soft:   #fffbeb;
    --ui-color-danger:         #ef4444;
    --ui-color-danger-strong:  #b91c1c;
    --ui-color-danger-soft:    #fef2f2;
    --ui-color-violet:         #7c3aed;
    --ui-color-violet-strong:  #6d28d9;
    --ui-color-violet-soft:    #f5f3ff;

    /* Chart palette (используется <activity-grid> и любой графикой) */
    --ui-chart-visits:    rgba(148, 163, 184, .22);
    --ui-chart-loads:     #2563eb;
    --ui-chart-uses:      #059669;
    --ui-chart-submits:   #7c3aed;
    --ui-chart-photos:    #111827;

    /* ── Spacing (4px base step) ─────────────────────────────────────── */
    --ui-spacing-1:  4px;
    --ui-spacing-2:  8px;
    --ui-spacing-3: 12px;
    --ui-spacing-4: 16px;
    --ui-spacing-5: 20px;
    --ui-spacing-6: 24px;
    --ui-spacing-8: 32px;

    /* ── Typography ──────────────────────────────────────────────────── */
    /* Системный шрифт выбран намеренно: панель должна открываться мгновенно
       и читаться как часть операционной системы, а не как веб-страница.
       Моноширинный несёт ДАННЫЕ — артикулы, размеры, токены, время. */
    --ui-font-system:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
    --ui-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                         Consolas, monospace;

    --ui-font-size-xs:  11px;
    --ui-font-size-sm:  12px;
    --ui-font-size-md:  13px;
    --ui-font-size-lg:  15px;
    --ui-font-size-xl:  19px;
    --ui-font-size-2xl: 24px;

    --ui-leading-tight:  1.25;
    --ui-leading-normal: 1.5;
    --ui-tracking-label: .04em;   /* uppercase-подписи без него слипаются */

    --ui-weight-normal: 400;
    --ui-weight-medium: 500;
    --ui-weight-semi:   600;
    --ui-weight-bold:   700;

    /* ── Форма ───────────────────────────────────────────────────────── */
    --ui-radius-sm:   5px;
    --ui-radius-md:   7px;
    --ui-radius-lg:  10px;
    --ui-radius-xl:  14px;
    --ui-radius-full: 999px;

    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ui-shadow-md: 0 3px 8px -2px rgba(15, 23, 42, .08),
                    0 10px 28px -10px rgba(15, 23, 42, .22);
    --ui-shadow-lg: 0 18px 48px -16px rgba(15, 23, 42, .34);

    /* ── Размеры контролов ───────────────────────────────────────────── */
    /* Одна высота на кнопку, поле и селект — иначе они не встают в ряд. */
    --ui-control-h:    32px;
    --ui-control-h-sm: 26px;
    --ui-control-h-lg: 38px;

    /* ── Фокус и движение ────────────────────────────────────────────── */
    --ui-ring:         0 0 0 3px rgba(37, 99, 235, .28);
    --ui-ring-danger:  0 0 0 3px rgba(239, 68, 68, .24);
    --ui-duration:     .14s;
    --ui-ease:         ease;

    /* ── Слои ────────────────────────────────────────────────────────── */
    --ui-z-dropdown: 1000;
    --ui-z-sticky:   1010;
    --ui-z-modal:    1050;
    --ui-z-toast:    1100;
}