/*
 * Greenkite — tầng 1 (--brand-*) đè lên src/css/tokens.css của kenhmebe. Chỉ được đè biến --brand-* có sẵn ở theme cha;
 * vai trò (tầng 2) dùng chung nên luật tương phản của theme cha kiểm luôn màu ở đây (`make lint`).
 * Nạp sau CSS của theme cha (functions.php), không qua Vite. `:root:root` (độ ưu tiên cao hơn :root của theme cha): `make dev`
 * chèn lại CSS của theme cha sau file này, thắng nhờ thứ tự thì dev hiện sai màu.
 *
 * Nhận diện: trưởng thành, thanh lịch, chuyên nghiệp, cứng cáp — đối lập với Happi Fami (hồng tươi, bo tròn, pastel).
 * - Cổ vịt (logo #1487AC) chủ đạo, cam đất dịu làm màu phụ, nền phụ pha cam đất nhẹ.
 *   Bốn màu cánh diều chỉ nằm trong logo, không dùng cho giao diện. Nền chính trắng và xám lạnh.
 * - Font: tiêu đề Montserrat (hình học, vững — gần chữ "GreenKite" của logo), nội dung Be Vietnam Pro. Cả hai lõi đã nạp.
 * - Hình khối: bo góc nhỏ, bóng nhẹ gần như viền mảnh.
 */
:root:root {
  --brand-font-heading: 'Montserrat Variable', ui-sans-serif, system-ui, sans-serif;
  --brand-font-body: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;

  --brand-charcoal: #1f2a30; /* mực xanh xám — chữ */
  --brand-gray: #5b6870;
  --brand-gray-line: #e1e6e9;
  --brand-gray-mist: #f3f5f6;
  --brand-main: #1487ac; /* cổ vịt của logo */
  --brand-main-dark: #0b5a74; /* nút, link: chữ trắng / nền trắng đủ tương phản */
  --brand-main-darker: #083f52;
  --brand-main-light: #dbe8ee;
  --brand-main-mist: #f1f6f8;
  --brand-main-garden: #eef3f5;
  --brand-accent: #c47a57; /* cam đất dịu — điểm nhấn phụ */
  --brand-accent-dark: #995334; /* cam đất đậm — chữ, điểm nhấn cần tương phản */
  --brand-accent-light: #f7eee8; /* nền danh mục, bộ lọc */
  --brand-accent-mist: #f7eee8; /* nền khối xen kẽ */
  --brand-accent-wash: #f7eee8; /* nền ô danh mục */
  --brand-amber-mist: #f5f4f0; /* đá ấm — ô danh mục thứ ba, nền ô điểm sao */

  /* Chân trang nền cổ vịt thẫm (đậm hơn thanh header một nấc): header và footer kẹp phần nội dung sáng ở giữa. */
  --brand-footer: var(--brand-main-darker);
  --brand-footer-raised: var(--brand-main-dark);
  --brand-footer-text: var(--brand-white);
  --brand-footer-muted: #a9c2cc; /* xám pha cổ vịt: 6.1:1 trên nền chân trang */
  --brand-footer-accent: var(--brand-white);
  --brand-footer-line: #1d5568;

  --brand-radius-chip: 0.125rem;
  --brand-radius-control: 0.25rem;
  --brand-radius-card: 0.25rem;
  --brand-radius-pill: 0.25rem;
  --brand-radius-bar: 0.375rem;
  --brand-radius-dialog: 0.5rem;
  --brand-shadow-card: 0 0 0 1px color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --brand-shadow-bar: 0 1px 0 0 color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --brand-shadow-float:
    0 0 0 1px color-mix(in srgb, var(--brand-charcoal) 10%, transparent),
    0 6px 16px -4px color-mix(in srgb, var(--brand-charcoal) 14%, transparent);
  --brand-shadow-popover:
    0 0 0 1px color-mix(in srgb, var(--brand-charcoal) 10%, transparent),
    0 12px 24px -12px color-mix(in srgb, var(--brand-charcoal) 25%, transparent);
}