/*
 * Дизайн-токени KRETAILPRO (docs/UI-Redesign-TZ.md, розділ 2).
 * Нижче вони ж мапляться на змінні Bootstrap 5.3, тож наявні сторінки беруть кольори, шрифт і радіуси звідси.
 * Заборонено: градієнти, blur, glow-тіні, радіуси > 16px, анімації > 200ms.
 */
:root {
    /* Бренд */
    --brand-900: #133a61;
    --brand-700: #1d4c7c;
    --brand-600: #2b659f; /* primary */
    --brand-100: #dbe7f3;
    --brand-50: #eef4fa;

    /* Жовтий з лого: лише 3px індикатор активного пункту і фокус на темному фоні, не для кнопок */
    --accent-400: #f2c200;

    /* Нейтральні */
    --ink-900: #0f1b2a;
    --ink-600: #4a5a6c;
    --ink-400: #8a97a6;
    --line: #e3e8ee;
    --surface: #ffffff;
    --canvas: #f5f7fa;

    /* Статуси обладнання: колір тексту / м'який фон */
    --status-active: #1f7a4d;
    --status-active-bg: #e7f4ec;
    --status-stock: #2b659f;
    --status-stock-bg: #eef4fa;
    --status-repair: #a15c07;
    --status-repair-bg: #fdf3e3;
    --status-bad: #b42318;
    --status-bad-bg: #fdecea;
    --status-off: #5b6675;
    --status-off-bg: #eef0f3;

    /* Радіуси */
    --r-sm: 6px;   /* інпути, бейджі */
    --r-md: 10px;  /* кнопки, картки */
    --r-lg: 14px;  /* модалки, sheet, поповери */

    /* Відступи, шкала 4px */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* Тінь — лише для поповерів, модалок і bottom sheet */
    --shadow-pop: 0 8px 24px rgba(15, 27, 42, .12);

    /* Типографіка */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --fs-12: .75rem;
    --fs-13: .8125rem;
    --fs-14: .875rem;
    --fs-16: 1rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Рух */
    --dur-fast: 120ms;
    --dur: 180ms;
    --ease: ease-out;

    /* Розміри оболонки */
    --sidebar-w: 248px;
    --rail-w: 72px;
    --topbar-h: 56px;
    --topbar-h-mobile: 52px;
    --tabbar-h: 60px;

    /* ---------- Bootstrap 5.3 ---------- */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 43, 101, 159;
    --bs-primary-text-emphasis: var(--brand-900);
    --bs-primary-bg-subtle: var(--brand-50);
    --bs-primary-border-subtle: var(--brand-100);
    --bs-secondary: var(--ink-600);
    --bs-secondary-rgb: 74, 90, 108;
    --bs-success: var(--status-active);
    --bs-success-rgb: 31, 122, 77;
    --bs-success-text-emphasis: #155636;
    --bs-success-bg-subtle: var(--status-active-bg);
    --bs-success-border-subtle: #bfe3cd;
    --bs-info: var(--brand-600);
    --bs-info-rgb: 43, 101, 159;
    --bs-info-text-emphasis: var(--brand-900);
    --bs-info-bg-subtle: var(--brand-50);
    --bs-info-border-subtle: var(--brand-100);
    --bs-warning: var(--status-repair);
    --bs-warning-rgb: 161, 92, 7;
    --bs-warning-text-emphasis: #6f3f05;
    --bs-warning-bg-subtle: var(--status-repair-bg);
    --bs-warning-border-subtle: #f3d9ae;
    --bs-danger: var(--status-bad);
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-text-emphasis: #7e1810;
    --bs-danger-bg-subtle: var(--status-bad-bg);
    --bs-danger-border-subtle: #f5c2bd;
    --bs-light: var(--canvas);
    --bs-light-rgb: 245, 247, 250;
    --bs-dark: var(--ink-900);
    --bs-dark-rgb: 15, 27, 42;

    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-14);
    --bs-body-font-weight: var(--fw-regular);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--ink-900);
    --bs-body-color-rgb: 15, 27, 42;
    /* Фон «поверхонь» Bootstrap (інпути, картки, таблиці, меню). Фон сторінки — --canvas, див. base.css. */
    --bs-body-bg: var(--surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--ink-900);
    --bs-emphasis-color-rgb: 15, 27, 42;
    --bs-secondary-color: var(--ink-600);
    --bs-secondary-color-rgb: 74, 90, 108;
    --bs-secondary-bg: var(--line);
    --bs-tertiary-color: var(--ink-400);
    --bs-tertiary-bg: var(--canvas);
    --bs-tertiary-bg-rgb: 245, 247, 250;

    --bs-link-color: var(--brand-600);
    --bs-link-color-rgb: 43, 101, 159;
    --bs-link-hover-color: var(--brand-700);
    --bs-link-hover-color-rgb: 29, 76, 124;

    --bs-border-color: var(--line);
    --bs-border-color-translucent: rgba(15, 27, 42, .12);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--r-md);
    --bs-border-radius-xl: var(--r-lg);
    --bs-border-radius-xxl: var(--r-lg);

    --bs-box-shadow: var(--shadow-pop);
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: var(--shadow-pop);

    --bs-focus-ring-width: 2px;
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-color: var(--brand-100);
}