/* ===================================================================
   Nam Hà Highfarm — Design tokens
   Nguồn DUY NHẤT cho màu, chữ, khoảng cách, bo góc, bóng đổ.
   KHÔNG hard-code mã màu ở file khác; luôn dùng biến ở đây.

   Bảng màu và chữ dưới đây lấy nguyên từ bộ nhận diện Nam Hà Highfarm:
   docs/brand/identity-board/brand-identity-spec.md. Đổi màu ở đây là đổi
   toàn site — không sửa file CSS nào khác, không viết mã màu ở nơi khác.

   Tên biến là hợp đồng với 5 file CSS còn lại: ĐỔI GIÁ TRỊ, đừng đổi tên.
   =================================================================== */

:root {
    /* ---- Màu thương hiệu — Nam Hà Highfarm ----
       Nguồn: docs/brand/identity-board/brand-identity-spec.md (bảng "Color palette").
       Tỷ lệ thị giác khuyến nghị của bộ nhận diện: 60–65% nền sáng, 25–30% xanh,
       tối đa 5–8% vàng/nâu cộng lại — vàng là điểm nhấn, không phải màu nền. */
    --c-primary: #155f3b;          /* Deep Forest Green — header, tiêu đề, nút chính */
    --c-primary-dark: #114c2f;     /* đậm hơn: hover nút chính */
    --c-primary-darker: #0b3220;   /* đậm nhất: chân trang, section nền tối */
    --c-primary-soft: #2f7d4c;     /* Farm Green — icon, sơ đồ, gradient */
    --c-primary-mist: #eef3ec;     /* rất nhạt: nền section xen kẽ */
    --c-accent: #c8a24a;           /* Harvest Gold — CTA phụ, gạch dưới tiêu đề, số thứ tự */
    --c-accent-dark: #a9853a;      /* nhấn đậm: hover */
    --c-accent-soft: #f5edda;      /* nhấn nhạt: nền badge, nền icon */

    /* Màu sản phẩm của bộ nhận diện: dùng cho mảng cà phê và một vài ứng dụng cao nguyên.
       KHÔNG dùng làm màu chữ hay nền chính. */
    --c-coffee: #6b4a2d;

    /* ---- Màu trung tính ---- */
    --c-ink: #183029;              /* Deep Ink Green — chữ tiêu đề */
    --c-body: #2c3f38;             /* chữ thân bài */
    --c-muted: #6b7c74;            /* chữ phụ, chú thích */
    --c-line: #dfe5df;             /* viền */
    --c-line-soft: #eef1ec;        /* viền rất nhạt, kẻ bảng */
    --c-bg: #ffffff;
    --c-bg-soft: #f7f8f4;          /* Highland White — nền section xen kẽ */
    --c-white: #ffffff;

    /* ---- Trạng thái ---- */
    --c-success: #1a7f4b;
    --c-danger: #b3261e;
    --c-star: #e0a82e;

    /* Nen nhat cua ba mau trang thai — dung cho huy hieu, khoi thong bao (giỏ hàng, đơn hàng). */
    --c-success-soft: #e3f3ea;
    --c-danger-soft: #fbe6e5;
    --c-info: #155f3b;
    --c-info-soft: #e7f0ea;
    /* ---- Chữ ----
       Bộ nhận diện chỉ định Be Vietnam Pro (Việt + Anh) và Noto Sans SC (Trung giản thể).
       Hai họ font khai trong CÙNG một stack: trình duyệt tự lấy Noto Sans SC cho ký tự
       Hán mà Be Vietnam Pro không có glyph — không phải đổi font theo ngôn ngữ trong CSS.
       <link> Google Fonts nằm ở Frontend/MasterPage.master, đừng khai font ở file khác. */
    --font-display: "Be Vietnam Pro", "Noto Sans SC", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-base: "Be Vietnam Pro", "Noto Sans SC", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-hero: clamp(2.5rem, 6vw, 4rem);
    /* Cấp "statement": câu định vị giữa trang. Không có cấp này thì thang chữ nhảy
       thẳng từ hero xuống h2 và phần giữa trang đọc rất phẳng. */
    --fs-statement: clamp(1.875rem, 3.4vw, 2.5rem);
    --fs-h1: clamp(2rem, 4vw, 3.125rem);
    --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
    --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
    --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);
    --fs-body: 14px;
    --fs-small: 0.875rem;
    --fs-kicker: 0.75rem;

    /* ---- Khoảng cách ---- */
    --sp-section: clamp(50px, 7vw, 70px);
    --sp-block: clamp(28px, 4vw, 48px);
    --container: 1220px;
    --container-narrow: 880px;

    /* ---- Hình khối ---- */
    /* Bản thiết kế dùng thẻ bo góc rõ (ảnh hero, thẻ sản phẩm, khối quy trình). */
    --radius: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --rule: 3px;                   /* độ dày thanh màu nhấn dưới tiêu đề */
    --shadow-sm: 0 2px 10px rgba(24, 48, 41, .06);
    --shadow: 0 10px 30px rgba(24, 48, 41, .09);
    --shadow-lg: 0 24px 60px rgba(24, 48, 41, .18);

    /* Chiều cao header: dự án có logo cao/thấp khác nhau thì chỉnh ở đây,
       layout.css và responsive.css đều tính theo hai biến này. */
    --header-h: 96px;
    --header-h-sm: 68px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: .18s var(--ease);
    --t: .28s var(--ease);
}