/* КОПІЯ дизайн-системи. Джерело правди: hub-marketing/ws-web-infra/design-system/bshm-ui.css — правити ТАМ і копіювати сюди. */
/* ============================================================================
   bshm-ui.css — дизайн-система групи компаній Будшляхмаш (BSHM)  v1
   ----------------------------------------------------------------------------
   Власник: ws-web-infra. Споживачі: CRM, веб-візитки, кит-скелет сайтів юросіб.
   Токени витягнено з еталонної веб-візитки:
     Матеріальна продукція/в офіс/візитки/web/dev/oleksandr-huivan.html
   Формат: CSS-змінні (light/dark) + базові компоненти.
   Індивідуальна тема продукту робиться ПЕРЕКРИТТЯМ змінних, не форком файлу.

   Структура:
     1. Токени (:root / light)
     2. Dark-тема ([data-theme="dark"] + prefers-color-scheme)
     3. Базовий reset
     4. Компоненти: кнопки (.bui-btn), інпути (.bui-field),
        картки (.bui-card), таблиці (.bui-table)
   Префікс класів — bui- , щоб не конфліктувати з розміткою сайтів.
   ============================================================================ */

/* ── 1. Токени — light (дефолт) ─────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Кольори — поверхні й текст */
  --color-bg:           #EFEFEF;
  --color-surface:      #F5F5F5;
  --color-surface-2:    #ffffff;
  --color-border:       rgba(39,41,43,0.15);
  --color-text:         #27292B;
  --color-text-muted:   #6C737A;
  --color-text-faint:   #9FA5AB;

  /* Бренд */
  --color-primary:       #00C853;
  --color-primary-hover: #219450;
  --color-accent-light:  #EBFFF3;
  /* Текст поверх --color-primary (зелений досить світлий → темний контраст) */
  --color-on-primary:    #111111;

  /* Тіні */
  --shadow-sm: 0 1px 3px rgba(39,41,43,0.07), 0 1px 2px rgba(39,41,43,0.04);
  --shadow-md: 0 4px 16px rgba(39,41,43,0.09), 0 2px 4px rgba(39,41,43,0.05);
  --shadow-lg: 0 20px 48px rgba(39,41,43,0.13), 0 4px 8px rgba(39,41,43,0.06);

  /* Типографіка */
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  /* Type scale (fluid) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  /* Spacing */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Радіуси */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Рух */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus-ring — похідний токен (у візитці не було; потрібен інпутам/кнопкам) */
  --ring: 0 0 0 3px rgba(0,200,83,0.35);
}

/* ── 2. Токени — dark ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:            #16181A;
  --color-surface:       #1E2022;
  --color-surface-2:     #26292C;
  --color-border:        rgba(255,255,255,0.1);
  --color-text:          #E8EAEC;
  --color-text-muted:    #8A9099;
  --color-text-faint:    #4E555C;
  --color-primary:       #00C853;
  --color-primary-hover: #00E65E;
  --color-accent-light:  rgba(0,200,83,0.12);
  --color-on-primary:    #111111;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
  --ring: 0 0 0 3px rgba(0,200,83,0.45);
}

/* Авто-dark, якщо тему не задано явно атрибутом */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            #16181A;
    --color-surface:       #1E2022;
    --color-surface-2:     #26292C;
    --color-border:        rgba(255,255,255,0.1);
    --color-text:          #E8EAEC;
    --color-text-muted:    #8A9099;
    --color-text-faint:    #4E555C;
    --color-primary:       #00C853;
    --color-primary-hover: #00E65E;
    --color-accent-light:  rgba(0,200,83,0.12);
    --color-on-primary:    #111111;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
    --ring: 0 0 0 3px rgba(0,200,83,0.45);
  }
}

/* ── 3. Базовий reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition), color var(--transition);
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
img { display: block; max-width: 100%; }

/* Спільне focus-кільце для клавіатурної навігації */
:where(a, button, input, select, textarea, .bui-btn):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ── 4a. Кнопки ─────────────────────────────────────────────────────────── */
.bui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  color: var(--color-text);
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
}
.bui-btn:active { transform: translateY(1px); }
.bui-btn:disabled,
.bui-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Primary — головна дія */
.bui-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.bui-btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

/* Secondary — обведена */
.bui-btn--secondary {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.bui-btn--secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-accent-light);
}

/* Ghost — без фону */
.bui-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.bui-btn--ghost:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Розміри */
.bui-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.bui-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.bui-btn--block { display: flex; width: 100%; }

/* ── 4b. Інпути / поля форм ─────────────────────────────────────────────── */
.bui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bui-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.bui-input,
.bui-textarea,
.bui-select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.bui-textarea { min-height: 6rem; resize: vertical; }
.bui-input::placeholder,
.bui-textarea::placeholder { color: var(--color-text-faint); }
.bui-input:focus,
.bui-textarea:focus,
.bui-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}
.bui-input:disabled,
.bui-textarea:disabled,
.bui-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-surface);
}
.bui-hint  { font-size: var(--text-xs); color: var(--color-text-faint); }
.bui-error { font-size: var(--text-xs); color: var(--color-primary); } /* single-accent система: помилку підсвічуємо акцентом */

/* ── 4c. Картки ─────────────────────────────────────────────────────────── */
.bui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.bui-card__header {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.bui-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.15;
}
.bui-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.bui-card__body {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bui-card__footer {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Інтерактивна картка (клікабельна) — hover як у action-item візитки */
.bui-card--interactive {
  cursor: pointer;
  transition: all var(--transition);
}
.bui-card--interactive:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── 4d. Таблиці ────────────────────────────────────────────────────────── */
.bui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bui-table th,
.bui-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.bui-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.bui-table tbody tr:last-child td { border-bottom: none; }
.bui-table tbody tr {
  transition: background-color var(--transition);
}
/* Зебра */
.bui-table--striped tbody tr:nth-child(even) { background: var(--color-surface); }
/* Ховер по рядку */
.bui-table--hover tbody tr:hover { background: var(--color-accent-light); }
/* Компактна */
.bui-table--compact th,
.bui-table--compact td { padding: var(--space-2) var(--space-3); }

/* ── Утиліта: бейдж (використовується у CRM/статусах) ───────────────────── */
.bui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-primary);
}