/* ==========================================================================
   HARDWARE52 — Design System
   Light Premium / Industrial B2B
   Источник бренд-цветов: assets/lib/computer-style.css (реальный сайт)
   ========================================================================== */

:root {

  /* ---- Brand — строго по UI-kit референсу пользователя (2026-09-15) ---- */
  --color-brand-yellow:      #FFC107; /* Основной — точно из UI-kit swatch */
  --color-brand-yellow-600:  #e6ac00; /* hover/active кнопки */
  --color-brand-yellow-50:   #fff8e1;

  --color-graphite-900:      #0F172A; /* Тёмный/текст — точно из UI-kit swatch */
  --color-graphite-700:      #434343; /* доп. оттенок из computer-style.css (вторичный текст) */
  --color-graphite-500:      #647488; /* Инфо — точно из UI-kit swatch */
  --color-graphite-300:      #a4a4a8;

  --color-accent-blue:       #3882F6; /* Синий — точно из UI-kit swatch */

  /* ---- Поверхности ---- */
  --color-bg:                #ffffff;
  --color-bg-subtle:         #F1F5F9; /* Фон — точно из UI-kit swatch */
  --color-surface:           #ffffff;
  --color-border:            #E2E8F0; /* Граница — точно из UI-kit swatch */
  --color-border-strong:     #d4d4d8;

  /* ---- Статусы — точно из UI-kit swatch ---- */
  --color-success:           #16A34A;
  --color-success-bg:        #e9f7ef;
  --color-warning:           #b26a00;
  --color-warning-bg:        #fff4e0;
  --color-danger:            #EF4444; /* Ошибка */
  --color-danger-bg:         #fbeae8;

  /* ---- Типографика — строго по UI-kit референсу (px/line-height как в спеке) ---- */
  --font-base: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Заголовок 1: Inter Bold 32/40 */
  --fs-h1: 2rem;      --lh-h1: 2.5rem;
  /* Заголовок 2: Inter Bold 24/32 */
  --fs-h2: 1.5rem;     --lh-h2: 2rem;
  /* Заголовок 3: Inter Semibold 20/28 */
  --fs-h3: 1.25rem;    --lh-h3: 1.75rem;
  /* Заголовок 4: Inter Semibold 16/24 */
  --fs-h4: 1rem;       --lh-h4: 1.5rem;
  /* Текст основной: Inter Regular 14/22 */
  --fs-body: 0.875rem; --lh-body: 1.375rem;
  /* Текст малый: Inter Regular 12/18 */
  --fs-body-sm: 0.75rem; --lh-body-sm: 1.125rem;
  /* Ссылка: Inter Medium 14/22 */
  --fs-link: 0.875rem; --lh-link: 1.375rem;
  /* Кнопка: Inter Medium 16/24 */
  --fs-button: 1rem;   --lh-button: 1.5rem;

  --fs-body-lg: 1.125rem;
  --fs-caption: 0.75rem;
  --lh-heading: 1.25;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Отступы (шкала 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Радиусы и тени ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 28, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.12);

  /* ---- Контейнер ---- */
  --container-max: 1440px;
  --container-pad: clamp(16px, 3vw, 32px);

  /* ---- Переходы ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ==========================================================================
   Базовый сброс
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-graphite-900);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-graphite-900);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); color: var(--color-graphite-700); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-8);
}

.section--subtle {
  background: var(--color-bg-subtle);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-brand-yellow);
  color: var(--color-graphite-900);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
}
.btn--primary:hover { background: var(--color-brand-yellow-600); }

.btn--secondary {
  background: var(--color-graphite-900);
  color: #fff;
}
.btn--secondary:hover { background: #000; }

.btn--outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-graphite-900);
}
.btn--outline:hover { border-color: var(--color-graphite-900); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-body-sm); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-body-lg); }

/* ==========================================================================
   Карточки
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* ==========================================================================
   Бейджи / метки товара (аналог em_productlabels)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
}

/* Соответствие референсу: Хит=синий, Акция/скидка=красный, Новинка=зелёный */
.badge--hot   { background: var(--color-accent-blue); }
.badge--sale  { background: var(--color-danger); }
.badge--new   { background: var(--color-success); }
.badge--discount { background: var(--color-danger); }

.badge--instock { background: var(--color-success-bg); color: var(--color-success); }

/* ==========================================================================
   Breakpoints (справочно, для media queries в компонентах)
   --bp-sm: 480px
   --bp-md: 768px
   --bp-lg: 1024px
   --bp-xl: 1280px
   --bp-2xl: 1440px
   ========================================================================== */