:root {
  /* ⚪ База: сторінка світла — кажемо це браузеру явно.
     Токени фарбують лише те, що малюємо МИ. Свою частину — попап <select>, скролбари,
     автозаповнення, календар <input type="date"> — браузер малює за СИСТЕМНОЮ схемою.
     Без цього рядка користувач із темною системою бачив би темні нативні попапи на
     нашій світлій вітрині (а на чекауті селекти є).
     Кабінети з темними темами перевизначають на dark — див. dark.css. Цей файл
     потрапляє й на вітрину: main.css тягне його через @import. */
  color-scheme: light;

  --color-primary: #2C2415;
  --color-secondary: #3E3020;
  /* ♿ WCAG AA: затемнено #C8712F → #B15E22, щоб білий текст на акцентних КНОПКАХ
     проходив 4.5:1 (було 3.58 ❌ → 4.67 ✅); акцент-текст на white теж 4.67 ✅. */
  --color-accent: #B15E22;
  --color-accent-hover: #954E1B;
  /* Найтемніший бренд-оранж для ТЕКСТУ на світлому — лишаємо (4.98:1). */
  --color-accent-ink: #A85C22;
  --color-bg: #F8F4EE;
  --color-white: #FFFFFF;
  --color-text: #2C2415;
  --color-text-muted: #7C6C5C;  /* ♿ AA: на bg 4.61:1, на white 5.05:1 (було #8A7A6A = 3.78 ❌) */
  --color-border: #E5DDD4;

  /* ── Семантичні статус-токени — ЄДИНЕ джерело для вітрини, кабінету вендора (--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;
  --shadow-sm: 0 2px 8px rgba(44,36,21,0.08);
  --shadow-md: 0 4px 20px rgba(44,36,21,0.12);
  --shadow-lg: 0 8px 40px rgba(44,36,21,0.16);
  --transition: 0.3s ease;
}