/**
 * 🧱 СПІЛЬНА ОСНОВА ТОКЕНІВ — усе, що НЕ є кольором бренду.
 *
 * Тут живе те, що має бути однаковим на вітрині, у кабінеті бренду, кабінеті менеджера
 * й адмінці: типографіка, розміри, скруглення, переходи і СЕМАНТИЧНІ кольори статусів
 * (успіх/попередження/помилка/підказка). Статуси навмисно спільні — зелений «доставлено»
 * і червоний «скасовано» мають читатись однаково скрізь.
 *
 * Кольори БРЕНДУ сюди не кладемо: кожна частина продукту має власний файл палітри
 * (palette-client / palette-vendor / palette-manager / palette-admin), щоб перефарбувати
 * одну частину, не зачепивши інші.
 */
:root {
  /* ⚪ База: сторінка світла — кажемо це браузеру явно.
     Токени фарбують лише те, що малюємо МИ. Свою частину — попап <select>, скролбари,
     автозаповнення, календар <input type="date"> — браузер малює за СИСТЕМНОЮ схемою.
     Без цього рядка користувач із темною системою бачив би темні нативні попапи на
     нашій світлій вітрині (а на чекауті селекти є).
     Кабінети з темними темами перевизначають на dark — див. dark.css. */
  color-scheme: light;

  /* ── Семантичні статус-токени — ЄДИНЕ джерело для вітрини, кабінету вендора (--vp-*) та адмінки.
     Значення узгоджені з SSOT статусів замовлень (shared/statuses.js): emerald/amber/blue/red.
     ⚠️ Це НЕ бренд-кольори: у переходах на нову палітру вони лишаються незмінними. ── */
  --color-success: #10b981; --color-success-fg: #047857; --color-success-bg: #ecfdf5; --color-success-border: #a7f3d0;
  --color-warning: #f59e0b; --color-warning-fg: #92400e; --color-warning-bg: #fff7ed; --color-warning-border: #fde68a;
  --color-danger:  #dc2626; --color-danger-fg:  #991b1b; --color-danger-bg:  #fef2f2; --color-danger-border:  #fecaca;
  --color-info:    #3b82f6; --color-info-fg:    #1e40af; --color-info-bg:    #eff6ff; --color-info-border:    #bfdbfe;
  --color-muted-bg: #f3f4f6; --color-muted-fg: #374151;

  /* ── Типографіка й метрики ── */
  --font-heading: 'Unbounded', sans-serif;
  --font-body: 'Onest', sans-serif;
  --container-width: 1200px;
  --header-height: 70px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --transition: 0.3s ease;
}