/* ============================================================
   Gluoon Booking v2 — дизайн-токени з Penpot
   (файл «Бронювання обладнання», сторінка «00 · Дизайн-система»)
   ============================================================ */
:root {
  /* --- Поверхні --- */
  --clr-bg: #0b0e14;              /* фон екрана */
  --clr-card: #171b24;            /* основна картка */
  --clr-panel: #1b2029;           /* попапи, підняті поверхні */
  --clr-tooltip: #1e2530;         /* тултипи */
  --clr-backdrop: rgba(5, 7, 11, .62);

  /* --- Текст --- */
  --clr-text: #e8eaf0;            /* основний */
  --clr-text-2: #98a2b3;          /* другорядний */
  --clr-text-3: #667085;          /* приглушений (лейбли колонок) */
  --clr-text-4: #4a5060;          /* ледь видимий (сирі рядки) */
  --clr-text-dim: #8a93a5;        /* пригашені назви */

  /* --- Бренд --- */
  --clr-primary: #9c27b0;
  --clr-primary-hover: #ab34c0;
  --clr-primary-text: #d8b4fe;    /* фіолетовий текст на пілах */
  --clr-primary-border: #c084fc;  /* фіолетова обводка акцентів */
  --clr-violet-deep: #6d28d9;     /* glow */
  --clr-violet-dark: #3b2a8c;     /* glow */

  /* --- Семантика --- */
  --clr-info: #4a90e2;
  --clr-success: #52d199;
  --clr-success-deep: #10b981;
  --clr-success-text: #34d399;
  --clr-warning: #fbbf24;
  --clr-comment: #c9a227;         /* коментар системи в рядках */
  --clr-danger: #dc3545;
  --clr-danger-soft: #e53e3e;
  --clr-danger-text: #f87171;
  --clr-danger-text-2: #fca5a5;
  --clr-past: #718096;
  --clr-past-text: #a0aec0;
  --clr-active: #ff6b35;          /* «триває зараз» */
  --clr-active-text: #ffd9c9;
  --clr-telegram: #229ed9;
  --clr-teal: #38b2ac;            /* розбірні компоненти, обладнання-акцент */

  /* --- Студії --- */
  --clr-studio1: #3182ce; --clr-studio1-border: #63b3ed; --clr-studio1-text: #90cdf4;
  --clr-studio2: #9c27b0; --clr-studio2-border: #c084fc; --clr-studio2-text: #d8b4fe;
  --clr-studio3: #38a169; --clr-studio3-border: #68d391; --clr-studio3-text: #9ae6b4;

  /* --- Лінії й напівтони --- */
  --clr-hairline: rgba(255, 255, 255, .05);
  --clr-hairline-strong: rgba(255, 255, 255, .07);
  --clr-fill-ghost: rgba(255, 255, 255, .03);   /* медіа-картки, лінк-плашки */
  --clr-fill-input: rgba(255, 255, 255, .04);   /* інпути */
  --clr-fill-hover: rgba(255, 255, 255, .06);

  /* --- Пілюлі станів --- */
  --pill-active-bg: rgba(16, 185, 129, .13);
  --pill-inactive-bg: rgba(148, 163, 184, .10);
  --pill-inactive-text: #94a3b8;
  --pill-owner-bg: rgba(156, 39, 176, .16);

  /* --- Радіуси --- */
  --r-card: 16px;
  --r-modal: 14px;
  --r-btn: 10px;
  --r-input: 10px;
  --r-chip: 8px;
  --r-pill: 999px;

  /* --- Відступи --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* --- Типографіка --- */
  --font-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --fs-h1: 24px;   /* заголовок сторінки в картці */
  --fs-h2: 18px;
  --fs-body: 14px;
  --fs-sm: 12.5px;
  --fs-label: 11px;   /* лейбли колонок таблиць — #667085, 600 */
  --fs-micro: 10px;   /* лейбли полів */

  /* --- Тіні --- */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-primary: 0 6px 18px rgba(156, 39, 176, .35);
  --shadow-popup: 0 14px 34px rgba(0, 0, 0, .55);
  --shadow-tooltip: 0 8px 32px rgba(0, 0, 0, .45), 0 0 20px rgba(74, 144, 226, .20);

  /* --- Розміри оболонки --- */
  --sidebar-w: 70px;
  --topbar-h: 64px;
}