/* ==========================================================================
   tokens.css
   MỘT TRONG HAI FILE PHẢI SỬA KHI LÀM SITE MỚI (file kia là inc/config.php).
   main.css và login.css không chứa mã hex nào, chúng chỉ gọi biến ở đây.
   ========================================================================== */

:root {

  /* ======================================================================
     1. BRAND — sửa 6 dòng này là xong phần màu của cả site
     ====================================================================== */
  /* SITE: pack.grtek.org — Hoàng Đại Phú, bao bì sinh học.
     Xanh lá lấy đúng từ logo, màu phụ là nâu giấy kraft. */
  --brand:      #2E7D32;   /* chủ đạo: link, nút, tiêu đề nhấn */
  --brand-dark: #1B5E20;   /* hover, chữ trên nền nhạt         */
  --brand-soft: #EAF4EA;   /* nền khối, badge                  */
  --brand-line: #C3E0C4;   /* viền cùng tông                   */
  --cta:        #8A5A2B;   /* hành động phụ — nâu kraft        */
  --cta-dark:   #6E4413;

  /* Bộ màu dựng sẵn, đều đạt tương phản ≥ 4.5:1 với chữ trắng:
     Xanh lá      #2E7D32 #1B5E20 #EAF4EA #C3E0C4   ← đang dùng
     Xanh dương   #0B62A8 #084B82 #EAF3FB #C3DCF1
     Xanh ngọc    #0C5F57 #084640 #E6F4F1 #B8DED7
     Cam          #C2500A #963D06 #FDF0E7 #F6D2B8
     Tím          #5B3FA8 #452F80 #F0ECFA #D5C9F0
     Đỏ đô        #A32235 #7C1928 #FCEBEE #F2C4CC   */


  /* ---------- 2. TRUNG TÍNH ---------- */
  --ink:    #0F172A;
  --ink-2:  #334155;
  --muted:  #64748B;
  --line:   #E4DCCD;       /* viền ngả giấy, hợp ngành bao bì */
  --bg:     #FFFFFF;
  --bg-2:   #F8F4EC;       /* nền khối phụ: giấy kraft nhạt   */

  /* ---------- 3. TRẠNG THÁI ---------- */
  --ok:          #2E7D32;   /* dấu ✓ dùng xanh lá cho đồng bộ */
  --ok-soft:     #F3EBDD;   /* nền kraft, đi cùng --cta-dark  */
  --warn:        #B45309;
  --warn-soft:   #FEF6E7;
  --danger:      #C2410C;
  --danger-soft: #FDECE4;

  /* ---------- 4. SPACING (lưới 8pt) ---------- */
  --s1: 8px; --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 48px; --s6: 64px;

  /* ---------- 5. BO GÓC ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---------- 6. ĐỔ BÓNG — chỉ 3 mức, đừng tự chế thêm ---------- */
  --sh-1: 0 1px 2px   rgba(15, 23, 42, .05);
  --sh-2: 0 4px 14px  rgba(15, 23, 42, .07);
  --sh-3: 0 12px 30px rgba(15, 23, 42, .10);

  /* ---------- 7. LAYOUT ---------- */
  --wrap: 1140px;
  --read: 68ch;

  /* ---------- 8. FONT — system stack, tải về 0 byte ----------
     Không dùng Arial: dấu tiếng Việt trong Arial đặt cao và chật hơn.
     System stack để mỗi máy dùng font gốc của nó. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---------- 9. THANG CHỮ ---------- */
  --t-xs: 13px; --t-sm: 15px; --t-base: 17px; --t-lg: 20px;
  --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px;
}


/* Đẩy màu brand vào biến toàn cục của Astra.
   Nhờ vậy nút, menu, link sẵn có của Astra tự đổi màu theo tokens,
   không cần vào Customizer chỉnh tay. */
:root {
  --ast-global-color-0: var(--brand);
  --ast-global-color-1: var(--brand-dark);
  --ast-global-color-2: var(--ink);
  --ast-global-color-3: var(--ink-2);
  --ast-global-color-4: var(--brand-soft);
  --ast-global-color-5: var(--bg-2);
  --ast-global-color-6: var(--line);
  --ast-global-color-7: var(--bg);
  --ast-global-color-8: var(--muted);
}