/*==========================================================
    HongHa UI 2026 — variables.css
    Bảng token thiết kế dùng chung cho toàn bộ giao diện.

    LƯU Ý: biến CSS BẮT BUỘC có tiền tố "--".
    Bản cũ khai báo "hh-primary:#D71920" (thiếu "--") nên mọi
    var(--hh-*) trong header.css đều vô hiệu → chữ/nền mất màu.
==========================================================*/
:root{

    /* ---------- Thương hiệu ---------- */
    --hh-primary:#D71920;          /* đỏ Hồng Hà */
    --hh-primary-dark:#B3121A;
    --hh-primary-hover:#bf161c;
    --hh-primary-light:#FFECEC;
    --hh-primary-soft:#FFF5F5;
    --hh-gradient:linear-gradient(135deg,#E01F26 0%,#B3121A 100%);
    --hh-gradient-soft:linear-gradient(180deg,#E01F26 0%,#C4161D 100%);

    /* ---------- Màu phụ trợ ---------- */
    --hh-accent:#FF6A00;           /* cam khuyến mãi */
    --hh-accent-light:#FFF3E8;
    --hh-gold:#FFB800;             /* sao đánh giá */
    --hh-green:#00A650;            /* trạng thái tốt / còn hàng */
    --hh-blue:#0B5FBF;             /* liên kết thông tin */
    --hh-red:#c61c1c;

    /* ---------- Chữ ---------- */
    --hh-text:#1A1A1A;
    --hh-text-body:#3A3F47;
    --hh-text-light:#6B7280;
    --hh-text-muted:#9AA3AF;
    --hh-text-invert:#FFFFFF;

    /* ---------- Nền ---------- */
    --hh-bg:#F2F4F7;
    --hh-bg-soft:#F8F9FB;
    --hh-white:#FFFFFF;
    --hh-dark:#2B303B;

    /* ---------- Viền ---------- */
    --hh-border:#E6E9EF;
    --hh-border-strong:#D5DAE3;

    /* ---------- Bo góc ---------- */
    --hh-radius-xs:6px;
    --hh-radius-sm:8px;
    --hh-radius:12px;
    --hh-radius-lg:16px;
    --hh-radius-xl:22px;
    --hh-radius-pill:999px;

    /* ---------- Đổ bóng ---------- */
    --hh-shadow-xs:0 1px 2px rgba(16,24,40,.05);
    --hh-shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
    --hh-shadow:0 4px 12px rgba(16,24,40,.08);
    --hh-shadow-md:0 8px 20px rgba(16,24,40,.10);
    --hh-shadow-lg:0 16px 36px rgba(16,24,40,.14);
    --hh-shadow-red:0 6px 18px rgba(215,25,32,.22);

    /* ---------- Bố cục ---------- */
    --hh-container:1400px;
    --hh-header-height:68px;
    --hh-topbar-height:36px;
    --hh-gap:16px;

    /* ---------- Chữ / font ---------- */
    --hh-font:'Roboto','Segoe UI',Arial,'Helvetica Neue',Helvetica,sans-serif;
    --hh-fs-xs:11px;
    --hh-fs-sm:12px;
    --hh-fs-base:14px;
    --hh-fs-md:15px;
    --hh-fs-lg:17px;
    --hh-fs-xl:20px;
    --hh-fs-2xl:24px;

    /* ---------- Chuyển động ---------- */
    --hh-transition:.22s cubic-bezier(.4,0,.2,1);
    --hh-transition-slow:.35s cubic-bezier(.4,0,.2,1);
}