/* ============================================================
   BlueBird Tech — Design Tokens
   Джерело: Figma BlueBirdTech-V3 (a3KuTi3RTL2hpItr9fg7Uq),
   сторінка «🎛️ Tokens», Figma variables, знято 01.09.2026.
   Контракт: усі кольори/шрифти в components.css та blocks.css —
   тільки через ці custom properties. Хардкод hex поза цим файлом
   заборонено (QA: grep '#[0-9a-f]' поза tokens.css).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Font families ---------- */
  --bbt-font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bbt-font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Backgrounds ---------- */
  --bbt-bg-brand: #311b92;
  --bbt-bg-brand-subtle: #edebfc;
  --bbt-bg-accent: #a98af9;
  --bbt-bg-inverse: #07070c;
  --bbt-bg-canvas: #fbfaf5;
  --bbt-bg-surface: #ffffff;
  --bbt-bg-surface-sunken: #f6f5f0;
  --bbt-bg-surface-cool: #e7eaf4;
  --bbt-bg-muted: #efefea;

  /* ---------- Foregrounds ---------- */
  --bbt-fg-primary: #141414;
  --bbt-fg-secondary: #565c6e;
  /* УВАГА, a11y: fg-tertiary на світлих фонах дає контраст ~2.6-2.9:1 при нормі
     WCAG AA 4.5:1 для дрібного тексту. Значення з палітри Figma, самовільно не
     міняємо. TODO(design): узгодити доступний відтінок (кандидат ~#6b7186). */
  --bbt-fg-tertiary: #9298ac;
  --bbt-fg-brand: #311b92;
  --bbt-fg-inverse: #ffffff;
  --bbt-fg-on-brand: #ffffff;
  --bbt-fg-on-accent: #141414;

  /* ---------- Borders ---------- */
  --bbt-border-default: #c9cedd;
  --bbt-border-subtle: #e2e4ec;
  --bbt-border-strong: #a8aec1;
  --bbt-border-inverse: #ffffff24;

  /* ---------- Status ---------- */
  --bbt-status-success-fg: #1b8a4c;
  --bbt-status-success-bg: #e3f5ea;
  --bbt-status-info-fg: #1f62c4;
  --bbt-status-info-bg: #e4eefb;
  --bbt-status-warning-fg: #b45309;
  --bbt-status-warning-bg: #fdf0dc;
  --bbt-status-error-fg: #c62828;
  /* status/error/bg відсутній у Figma variables — робоче значення, узгодити з дизайнером */
  --bbt-status-error-bg: #fbeaea; /* TODO(design): verify */

  /* ---------- Overlays (зняті з instance-стилів макета, не з variables) ---------- */
  --bbt-overlay-white-10: rgba(255, 255, 255, 0.1);
  --bbt-overlay-white-24: rgba(255, 255, 255, 0.24);
  --bbt-overlay-white-28: rgba(255, 255, 255, 0.28);
  --bbt-overlay-white-38: rgba(255, 255, 255, 0.38);

  /* Hero-градієнт (node 208:347) */
  --bbt-hero-gradient: linear-gradient(180deg, #0a0a10 0%, #0c0b1c 62%, #221457 100%);

  /* Ink-градієнт карток і промо (кути в макеті 122-155deg, уніфіковано) */
  --bbt-ink-gradient: linear-gradient(146deg, #0b0b12 0%, #2a1780 71%);

  /* Світлий панельний градієнт (секції 06/10/11 макета, однаковий байт-у-байт) */
  --bbt-panel-gradient: linear-gradient(180deg, #cfd8ee 0%, #f4f3ee 100%);

  /* ---------- Header ---------- */
  --bbt-header-bg: #07070c;
  --bbt-header-fg: #ffffff;
  --bbt-header-item-bg: #ffffff14;

  /* ---------- Fields ---------- */
  --bbt-field-bg: #f6f5f0;
  --bbt-field-border: #c9cedd;
  --bbt-field-placeholder: #9298ac;

  /* ---------- Cards ---------- */
  --bbt-card-bg: #ffffff;
  --bbt-card-border: #e2e4ec;

  /* ---------- Layout ---------- */
  --bbt-container-max: 1440px;
  --bbt-container-pad: 64px;   /* десктоп 1440: поля 64 */
  --bbt-container-pad-m: 20px; /* мобайл 390: поля 20 (референс M1-M3) */

  /* ============================================================
     Типографіка BBT/* — кожен стиль = 4 змінні:
     size / line-height / letter-spacing / weight
     ============================================================ */

  /* Display (Inter Semi Bold 600) */
  --bbt-display-md-size: 50px; --bbt-display-md-lh: 56px; --bbt-display-md-ls: -1px;
  --bbt-display-sm-size: 42px; --bbt-display-sm-lh: 48px; --bbt-display-sm-ls: -0.76px;
  --bbt-display-weight: 600;

  /* Heading (Inter Semi Bold 600) */
  --bbt-heading-xl-size: 34px; --bbt-heading-xl-lh: 40px; --bbt-heading-xl-ls: -0.51px;
  --bbt-heading-lg-size: 28px; --bbt-heading-lg-lh: 34px; --bbt-heading-lg-ls: -0.34px;
  --bbt-heading-md-size: 24px; --bbt-heading-md-lh: 30px; --bbt-heading-md-ls: -0.24px;
  --bbt-heading-sm-size: 20px; --bbt-heading-sm-lh: 26px; --bbt-heading-sm-ls: -0.12px;
  --bbt-heading-xs-size: 18px; --bbt-heading-xs-lh: 24px; --bbt-heading-xs-ls: -0.072px;
  --bbt-heading-weight: 600;

  /* Title (Inter) */
  --bbt-title-lg-size: 16px; --bbt-title-lg-lh: 22px; --bbt-title-lg-ls: -0.032px; --bbt-title-lg-weight: 600;
  --bbt-title-md-size: 15px; --bbt-title-md-lh: 21px; --bbt-title-md-ls: -0.015px; --bbt-title-md-weight: 500;
  --bbt-title-sm-size: 14px; --bbt-title-sm-lh: 20px; --bbt-title-sm-ls: 0;      --bbt-title-sm-weight: 500;

  /* Body (Inter Regular 400 / strong Medium 500) */
  --bbt-body-lg-size: 18px; --bbt-body-lg-lh: 28px;
  --bbt-body-md-size: 16px; --bbt-body-md-lh: 25px;
  --bbt-body-sm-size: 14px; --bbt-body-sm-lh: 21px;
  --bbt-body-xs-size: 12px; --bbt-body-xs-lh: 18px;

  /* Mono labels (IBM Plex Mono Medium 500, uppercase-контекст).
     Увага: у Figma variables letterSpacing заданий у ВІДСОТКАХ від кегля,
     тут значення вже перераховані в px. */
  --bbt-mono-label-xs-size: 11px; --bbt-mono-label-xs-lh: 14px; --bbt-mono-label-xs-ls: 0.55px;
  --bbt-mono-label-sm-size: 11px; --bbt-mono-label-sm-lh: 15px; --bbt-mono-label-sm-ls: 0.55px;
  --bbt-mono-label-md-size: 11px; --bbt-mono-label-md-lh: 15px; --bbt-mono-label-md-ls: 0.66px;

  /* Mono data (табличні значення) */
  --bbt-mono-data-md-size: 11px; --bbt-mono-data-md-lh: 16px; --bbt-mono-data-md-ls: 0;   --bbt-mono-data-md-weight: 500;
  --bbt-mono-data-sm-size: 11px; --bbt-mono-data-sm-lh: 15px; --bbt-mono-data-sm-ls: 0.22px; --bbt-mono-data-sm-weight: 400;

  /* Buttons (IBM Plex Mono Medium 500) */
  --bbt-button-md-size: 11px; --bbt-button-md-lh: 14px; --bbt-button-md-ls: 0.44px;
  --bbt-button-lg-size: 12px; --bbt-button-lg-lh: 15px; --bbt-button-lg-ls: 0.48px;
  --bbt-button-xl-size: 13px; --bbt-button-xl-lh: 16px; --bbt-button-xl-ls: 0.52px;
}