/**
 * CSS custom properties sinh từ design/design-tokens.json — Sprint 03 chỉ được đổi giá trị ở
 * đây (hoặc ở nguồn JSON), KHÔNG hardcode giá trị màu/spacing trong style.css. Xem
 * docs/DesignSystem.md.
 *
 * Redesign 2026-08-23 (Product Owner — bản Figma chốt mới, export tại `design/23-8/`, thay thế
 * `design/koco.jpg` cũ): màu nền tối chuyển từ đen thuần (#070707) sang navy đậm (#1f232e), topbar
 * chuyển từ navy sang đỏ mận (#781035) — đo màu THẬT bằng Python/Pillow trực tiếp trên
 * `design/23-8/trang chu/Desktop - 8.jpg` (không áng chừng bằng mắt). Gold accent (#d6b035) giữ
 * nguyên — khớp mẫu mới (#d5af34, chênh lệch không đáng kể). Phạm vi đợt này: CHỈ màu nền + Header +
 * Footer (theo yêu cầu Product Owner, tránh sửa tràn lan nhiều phần cùng lúc) — badge/CTA button/
 * section riêng lẻ (Hero/Best Seller/Flash Sale...) làm ở đợt sau.
 */
:root {
    /* Color — brand */
    --color-brand-primary: #1f232e;
    --color-brand-secondary: #6b6b6b;
    --color-brand-accent: #d6b035;

    /* Color — semantic */
    --color-success: #1e7e34;
    --color-warning: #b8860b;
    --color-danger: #a8123e;
    --color-info: #2563eb;

    /* Color — neutral */
    --color-bg: #ffffff;
    --color-bg-subtle: #f7f5f2;
    --color-surface-dark: #161616;
    --color-topbar-bg: #781035;
    /* CHG-011 (2026-08-24, xem docs/CHANGE_LOG.md — Footer UI Audit): màu nền phần Footer BÊN DƯỚI
       ảnh trang trí `bg-footer.png` (Newsletter/Columns/Bottom-bar) — đo trực tiếp mép dưới của
       chính file ảnh đó (rgb(20,24,32), PNG, không nhiễu nén) VÀ đối chiếu độc lập trên
       `Desktop - 8.jpg` (rgb(20,24,33) tại nhiều điểm y khác nhau, x=1350) — 2 nguồn khớp nhau, xác
       nhận đây là màu ĐÚNG, không phải `--color-brand-primary` (#1f232e) đang dùng nhầm trước đó
       (sáng hơn rõ rệt, tạo seam nhìn thấy được ngay dưới ảnh trang trí). */
    --color-footer-lower-bg: #141820;
    /* Sprint "Final Audit & Fix Product Card UI" (2026-09-08) — màu nền vùng THÔNG TIN (Info Area:
       brand/tên/giá) của Product Card kiểu 'dark' trên Category/Shop/Brand Listing — đo TRỰC TIẾP
       bằng .NET `Bitmap.GetPixel()` trên `design/23-8/san pham/San-pham.jpg` (x=600,y=1180, vùng
       nền phẳng bên trong Info Area, tránh chữ): rgb(44,51,67) = #2c3343. KHÁC HẲN vùng ẢNH (Media
       Area) của cùng Card, đo cùng phương pháp (x=400,y=730): rgb(20,24,33) = #141821 ≈ ĐÚNG
       `--color-footer-lower-bg` phía trên (chênh 1 đơn vị kênh Blue — nhiễu nén JPEG, không phải 2
       màu khác nhau) — do đó Media Area TÁI DÙNG token đã có, chỉ Info Area cần token mới này.
       Xác nhận qua browser thật: giá trị `#2c3343` này ĐÃ tồn tại y hệt (hardcode literal, chưa
       tokenize) trong `.block-best-sellers .product-card--dark .product-card__thumb`/`__body`
       (CHG-041/047/049, style.css dòng ~322-370) — không phải trùng hợp, xác nhận đây là 1 giá trị
       thiết kế THẬT duy nhất của hệ thống. Token này tổng quát hoá lại giá trị đó để dùng chung. */
    --color-card-info-bg: #2c3343;
    /* PD-06 (2026-09-09, Product Detail — Payment/Shipping, xem CHANGE_LOG_PRODUCT_DETAIL_PD06.md)
       — nền khối "Thanh toán" trên Product Detail. Đo TRỰC TIẾP bằng .NET `Bitmap.GetPixel()` trên
       `design/23-8/chi tiet san pham/Chi-tiet-San-pham.jpg` (vùng phẳng bên trong khung, tránh chữ/
       logo): rgb(73,69,57) = #494539 — nâu-olive đậm, KHÁC HẲN mọi token nền tối hiện có
       (`--color-brand-primary` #1f232e/`--color-footer-lower-bg` #141820/`--color-card-info-bg`
       #2c3343 đều thiên navy/xanh, không phải nâu) — không có token nào tái dùng được, bổ sung mới
       theo đúng nguyên tắc "ưu tiên reuse, chỉ thêm khi thực sự cần" (PD-06 brief §7). */
    --color-payment-box-bg: #494539;
    /* CHG-021 (2026-08-24, Block 3 — Trust Benefits Visual Matching, xem docs/CHANGE_LOG.md): màu
       nền dải Trust Benefits/USP (100%/14/48h/1:1) — đo TRỰC TIẾP bằng PHP GD trên chính
       `design/23-8/trang chu/Desktop - 8.jpg` (ảnh reference gốc), quét dọc x=cố định qua dải USP:
       y=870–1163 → rgb(24,24,32) = #181820 ĐỒNG NHẤT tuyệt đối trên toàn dải (khác hẳn
       `--color-brand-primary` #1f232e mà Best Sellers dùng ngay bên dưới, y=1166+ → #1f232e — ranh
       giới rõ ràng tại y≈1164). KHÔNG trùng `--color-footer-lower-bg` (#141820, đo từ vùng Footer
       khác trong cùng ảnh) dù gần giống — 2 tông tối riêng biệt, không dùng chung. */
    --color-trust-bg: #181820;
    /* CHG-060 (2026-08-27, Trend Layout Correction): màu nền riêng block "Chăm sóc từ bên trong"
       (Trend/Topic) — đo TRỰC TIẾP bằng Python/Pillow trên `design/23-8/trang chu/Desktop - 8.jpg`,
       quét dọc x=5 qua toàn bộ dải y=4400-5250: rgb(7,7,7) ĐỒNG NHẤT tuyệt đối trên toàn bộ chiều
       rộng section (x=10..1360, y=4560 VÀ y=5120 — cả 2 mép trên/dưới đều khớp). Gần như ĐEN THUẦN,
       KHÁC HẲN `--color-brand-primary` (#1f232e) mà bản demo trước đó dùng nhầm (khiến section hoà
       lẫn vào nền chung Homepage, không có visual identity riêng — đúng lỗi Product Owner phát hiện
       qua screenshot thật). */
    --color-trend-bg: #070707;
    /* Sprint Product Phase 1 — Hợp tác cùng KoCo Page (2026-09-15, xem D-VK-004,
       docs/01_Project/DECISION_LOG.md): màu nền card "Lợi thế của KoCo" — đo TRỰC TIẾP bằng PHP GD
       (Python không có sẵn trên máy dev, dùng phương án thay thế đã có tiền lệ — xem CHG-050/PD-06)
       trên `design/23-8/trang gioi thieu/Hop-tac-cung-Koco.jpg`, quét vùng 60×80px bên trong card
       đầu tiên (tránh chữ): rgb(48,48,48) = #303030 ĐỒNG NHẤT áp đảo (11083/11400 điểm mẫu). Xám
       trung tính thuần (r=g=b), KHÁC HẲN `--color-card-info-bg` (#2c3343, ám xanh navy rõ rệt) —
       không tái dùng được, thêm token mới theo đúng nguyên tắc "ưu tiên reuse, chỉ thêm khi thực sự
       cần" (đã kiểm tra không có token nền trung tính nào gần đúng hơn). Tên tổng quát (không gắn
       "hop-tac") vì đây là 1 tông nền card trung tính có thể tái dùng cho trang khác của Framework.
       Nền "Năng lực vận hành hiện tại" dùng lại `--color-trust-bg` (đo khớp #181820 tuyệt đối,
       không cần token mới) — bảng data rows dùng lại `--color-border-dark` (#2a2a2a, đo được
       #282428, chênh ≤2 đơn vị/kênh = nhiễu nén JPEG, không phải 2 màu khác nhau, cùng nguyên tắc đã
       áp dụng ở `--color-card-info-bg`). Thanh "Quy trình hợp tác" dùng lại NGUYÊN
       `--color-payment-box-bg` (đo được #494539, KHỚP TUYỆT ĐỐI, không cần token mới). */
    --color-card-neutral-bg: #303030;
    /* Sprint Product Phase 1 — Hợp tác cùng KoCo Page (2026-09-15): màu nền nút CTA phụ "Tải hồ sơ
       năng lực" (solid, không phải outline — đo TRỰC TIẾP bằng PHP GD trên
       `design/23-8/trang gioi thieu/Hop-tac-cung-Koco.jpg`, vùng bên trong nút, tránh chữ: đa số áp
       đảo rgb(212,212,208) = #d4d4d0, 3 điểm mẫu độc lập đều lệch ≤2 đơn vị/kênh). Xám ấm nhạt,
       KHÁC `--color-text-on-dark` (#f4ede7, ấm/sáng hơn nhiều — không tái dùng được) và
       `--color-border` (#e2e2e2, dùng cho nền sáng, không phải token nút) — thêm mới, đặt tên tổng
       quát (không gắn "hop-tac") vì đây là biến thể nút "solid nhạt trên nền tối" có thể tái dùng
       (nút CTA chính "Đăng ký hợp tác" dùng lại NGUYÊN `--color-topbar-bg`, đo được #7a1036 KHỚP
       TUYỆT ĐỐI #781035, không cần token mới). */
    --color-btn-light-bg: #d4d4d0;
    --color-search-bg: #393d46;
    --color-text: #111111;
    --color-text-on-dark: #f4ede7;
    --color-text-on-dark-muted: #a2a2a2;
    --color-text-muted: #6b6b6b;
    --color-border: #e2e2e2;
    --color-border-dark: #2a2a2a;

    /* Typography — Helvetica Neue theo yêu cầu Sprint 04, fallback hệ thống khi máy không có font */
    --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-loose: 1.75;

    /* Spacing */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-base: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1.4);

    /* Breakpoint (tài liệu — media query dùng giá trị px trực tiếp, xem docs/DesignSystem.md) */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}