/* ============================================================
   BizFlow Design Tokens — R2 (фундамент дизайн-системи)
   Джерело істини: design-prototype.html (затверджено 17.06.2026)
   Стиль: Apple × яскравий SaaS · світла основна + темна

   ВАЖЛИВО: цей файл містить ВИКЛЮЧНО CSS custom properties
   (--bf-*). Він НЕ задає жодних правил для елементів, тому
   підключення НЕ змінює вигляд жодної сторінки, доки
   компоненти не почнуть посилатися на --bf-* (крок R4).

   Admin наразі hard-coded темний (--admin-*). --bf-* ізольований
   від --admin- — нульовий ризик колізій. Перемикач світла/темна
   для admin буде під'єднано на кроці R4, коли компоненти
   мігрують на --bf-*.

   Значення синхронізовані з www/assets/css/tokens.css
   та crm/assets/css/tokens.css (тримати ідентичними).
   ============================================================ */

:root {
  /* — Акцент — */
  --bf-accent:           #7C5CFC;
  --bf-accent-2:         #5B8DEF;
  --bf-accent-gradient:  linear-gradient(135deg, #7C5CFC 0%, #5B8DEF 100%);
  --bf-accent-glow:      rgba(124, 92, 252, 0.22);
  --bf-accent-soft:      rgba(124, 92, 252, 0.10);

  /* — Семантичні — */
  --bf-success:    #10B981;  --bf-success-bg: rgba(16, 185, 129, 0.10);
  --bf-warning:    #F59E0B;  --bf-warning-bg: rgba(245, 158, 11, 0.10);
  --bf-danger:     #EF4444;  --bf-danger-bg:  rgba(239, 68, 68, 0.10);
  --bf-info:       #3B82F6;  --bf-info-bg:    rgba(59, 130, 246, 0.10);

  /* — Поверхні (СВІТЛА тема — основна) — */
  --bf-bg:           #FAFAFB;
  --bf-bg-elevated:  #F3F4F6;
  --bf-card:         #FFFFFF;
  --bf-input:        #FFFFFF;
  --bf-sidebar:      #FFFFFF;
  --bf-hover:        rgba(0, 0, 0, 0.03);

  /* — Текст — */
  --bf-text:        #1A1A2E;
  --bf-text-muted:  #6B7280;
  --bf-text-faint:  #9CA3AF;

  /* — Межі — */
  --bf-border:        #EEF0F4;
  --bf-border-input:  #D1D5DB;
  --bf-border-focus:  #7C5CFC;

  /* — Навігація — */
  --bf-nav-active-bg:    rgba(124, 92, 252, 0.08);
  --bf-nav-active-text:  #7C5CFC;
  --bf-nav-hover:        rgba(0, 0, 0, 0.03);

  /* — Тіні (світлі, м'які) — */
  --bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bf-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --bf-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --bf-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* — Радіуси — */
  --bf-radius-sm:   8px;
  --bf-radius-md:   12px;
  --bf-radius-lg:   16px;
  --bf-radius-xl:   20px;
  --bf-radius-full: 9999px;

  /* — Відступи — */
  --bf-space-xs:  4px;
  --bf-space-sm:  8px;
  --bf-space-md:  16px;
  --bf-space-lg:  24px;
  --bf-space-xl:  32px;
  --bf-space-2xl: 48px;
  --bf-space-3xl: 64px;

  /* — Типографіка — */
  --bf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bf-fs-xs:   11px;
  --bf-fs-sm:   12.5px;
  --bf-fs-base: 14px;
  --bf-fs-lg:   18px;
  --bf-fs-h3:   22px;
  --bf-fs-h2:   28px;
  --bf-fs-h1:   36px;
  --bf-fw-normal:   400;
  --bf-fw-medium:   500;
  --bf-fw-semibold: 600;
  --bf-fw-bold:     700;
  --bf-fw-extra:    800;

  /* — Переходи — */
  --bf-transition:      0.15s ease;
  --bf-transition-slow: 0.25s ease;
}

/* — ТЕМНА тема — активується під [data-theme="dark"].
   Буде під'єднано до перемикача на кроці R4. */
[data-theme="dark"] {
  --bf-accent-soft:  rgba(124, 92, 252, 0.15);

  --bf-bg:           #0E0E1A;
  --bf-bg-elevated:  #16162A;
  --bf-card:         #1A1A2E;
  --bf-input:        #16162A;
  --bf-sidebar:      #0E0E1A;
  --bf-hover:        rgba(255, 255, 255, 0.04);

  --bf-text:        #F5F5FA;
  --bf-text-muted:  #9CA0B0;
  --bf-text-faint:  #6B7280;

  --bf-border:        rgba(255, 255, 255, 0.06);
  --bf-border-input:  rgba(255, 255, 255, 0.12);

  --bf-nav-active-bg:    rgba(124, 92, 252, 0.15);
  --bf-nav-active-text:  #A487FE;
  --bf-nav-hover:        rgba(255, 255, 255, 0.04);

  --bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --bf-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --bf-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --bf-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}