/**
 * POTACO — Design Tokens
 * Sinh bởi bước /wp-03a-design ngày 2026-08-24.
 * Nguồn: đo trực tiếp bằng color picker từ docs/potaco-layout/*.png
 *
 * ⛔ KHÔNG hardcode hex / px cho giá trị đã có token ở đây.
 * ⛔ Cần màu hoặc cỡ mới ⇒ quay lại bước 03a bổ sung, cập nhật cả
 *    docs/wp/design-system.md và khối PROMPT BASE — không tự chế trong feature.
 *
 * File này phải được nạp TRƯỚC mọi CSS khác.
 */

:root {

  /* ===========================================================
     1. MÀU — NAVY (thương hiệu chính)
     Đo từ layout: footer #001842 · CTA band #001E5A (43.623px)
     nút chính #002466 · nút biến thể #002A78 · card #003C84 / #004272
     =========================================================== */
  --c-primary-900: #001842;   /* footer, nền tối nhất */
  --c-primary-800: #001E5A;   /* CTA band, box tư vấn, tiêu đề */
  --c-primary-700: #002466;   /* ★ nút chính */
  --c-primary-600: #002A78;
  --c-primary-500: #003C84;   /* card sáng, link hover */
  --c-primary-400: #004272;   /* card "Dịch vụ tốt" */
  --c-primary-50:  #EAEFF9;   /* nền badge, khối nhấn nhạt */

  --c-primary:       var(--c-primary-700);
  --c-primary-hover: var(--c-primary-800);   /* hover đậm hơn */
  --c-primary-light: var(--c-primary-500);

  /* ===========================================================
     2. MÀU — CAM (nhấn). HAI TÔNG, dùng đúng chỗ.
     Đo từ layout: #FC6C06 (nút, badge số) · #F0661E (trang SP) · #EA6C2A (card)
     =========================================================== */

  /* Cam thương hiệu — dùng cho badge số, icon, số section 01-10,
     đường kẻ nhấn, viền. KHÔNG đặt chữ trắng lên (chỉ 2,88:1). */
  --c-accent:        #FC6C06;
  --c-accent-50:     #FFF1E6;

  /* Cam đậm — CHỈ dùng làm nền cho phần tử CÓ CHỮ TRẮNG (nút CTA).
     Chữ trắng trên nền này đạt 4,87:1 → WCAG AA ✅ */
  --c-accent-strong: #BF4E05;
  --c-accent-hover:  #A34204;   /* hover của nút cam — 6,29:1 */

  /* ===========================================================
     3. MÀU — TRUNG TÍNH
     =========================================================== */
  --c-heading:     #001E5A;   /* tiêu đề màu navy, KHÔNG dùng đen — 15,7:1 */
  --c-text:        #1A2340;   /* body — 15,6:1 */
  --c-text-muted:  #667085;   /* mô tả, meta, caption — 4,97:1 trên trắng */
  --c-text-invert: #FFFFFF;

  --c-bg:          #FFFFFF;
  /* Nền TRANG (không phải nền thẻ). Đo từ `gioi-thieu-v2-20260904.png`:
     vùng ngoài thẻ ~ rgb(250,251,252). Chênh với trắng chỉ 1,035:1 — cố ý
     nhạt như vậy, việc tách thẻ khỏi nền là của `--shadow-md` chứ không
     phải của màu. Đậm hơn (vd `--c-bg-alt`) là lệch layout. */
  --c-bg-page:     #FAFBFD;
  --c-bg-alt:      #F5F6FA;   /* section xen kẽ (đo #F6F6FC) */
  --c-bg-dark:     var(--c-primary-800);

  --c-border:        #E4E7EF;
  --c-border-strong: #CBD2E0;

  /* ===========================================================
     4. MÀU — TRẠNG THÁI
     Alert dùng nền nhạt + chữ đậm (tránh lỗi tương phản chữ trắng)
     =========================================================== */
  --c-success:     #15803D;  --c-success-bg: #ECFDF3;
  --c-warning:     #B45309;  --c-warning-bg: #FFFAEB;
  --c-error:       #DC2626;  --c-error-bg:   #FEF3F2;
  --c-info:        #0369A1;  --c-info-bg:    #EFF8FF;

  /* ===========================================================
     5. TYPOGRAPHY — Be Vietnam Pro (tự host, đủ dấu tiếng Việt)
     =========================================================== */
  --font-heading: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --fs-h1:    2.75rem;  /* 44px */
  --fs-h2:    2rem;     /* 32px */
  --fs-h3:    1.375rem; /* 22px */
  --fs-h4:    1.125rem; /* 18px */
  --fs-body:  1rem;     /* 16px */
  --fs-sm:    0.875rem; /* 14px */
  --fs-xs:    0.75rem;  /* 12px */

  /* Tiếng Việt có dấu chồng cao (ẫ ộ ữ) — line-height phải rộng hơn tiếng Anh */
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-tight:   1.15;

  --ls-caps: 0.04em;   /* nhãn viết hoa: NHẬN BÁO GIÁ, TIẾN ĐỘ... */

  /* ===========================================================
     6. KHOẢNG CÁCH — thang bội số 4px
     =========================================================== */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px;

  --section-gap:   80px;   /* khoảng cách giữa 2 section */
  --card-padding:  24px;
  --block-gap:     32px;   /* khoảng cách trong section */
  --hero-gap:      40px;   /* banner đầu trang → nội dung: MỘT con số cho mọi trang
                              (CR 2026-09-11). Không đổi theo breakpoint. */
  --cta-gap:       30px;   /* nội dung → dải CTA ở <992 (CR 2026-09-19). Dải tự mang
                              khoảng cách, khối đứng trước bị ép về 0 đệm dưới. */

  /* ===========================================================
     7. BO GÓC · ĐỔ BÓNG · VIỀN
     Bóng nhuốm navy thay vì đen thuần — hòa với bảng màu
     =========================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 24, 66, .06);
  --shadow-md: 0 4px 16px rgba(0, 24, 66, .08);
  --shadow-lg: 0 12px 32px rgba(0, 24, 66, .12);

  --border-w: 1px;

  /* ===========================================================
     8. LƯỚI & CONTAINER
     =========================================================== */
  --container:        1200px;
  --container-narrow:  800px;   /* nội dung bài viết dài */
  --gutter:            24px;
  --sidebar-w:        280px;    /* sidebar dịch vụ / sản phẩm */

  /* ===========================================================
     9. Z-INDEX — thang cố định, không dùng số ngoài thang
     =========================================================== */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;    /* header dính, sidebar mục lục dính */
  --z-floating:  700;    /* nút liên hệ nổi */
  --z-drawer:    800;    /* menu mobile */
  --z-overlay:   900;
  --z-modal:    1000;    /* lightbox gallery */
  --z-toast:    1100;

  /* ===========================================================
     10. TỈ LỆ ẢNH — cùng loại BẮT BUỘC cùng tỉ lệ
     =========================================================== */
  --ar-hero:        21 / 9;
  --ar-hero-mobile:  4 / 3;
  --ar-card:        16 / 9;   /* dịch vụ, tin tức */
  --ar-project:      4 / 3;   /* card dự án */
  --ar-product:      1 / 1;   /* ảnh cắt nền, nền trắng */
  --ar-avatar:       1 / 1;
  --ar-certificate:  3 / 4;   /* ảnh scan chứng chỉ, dọc */

  /* ===========================================================
     11. CHUYỂN ĐỘNG — tiết chế
     =========================================================== */
  --transition:      160ms ease;
  --transition-slow: 280ms ease;
}

/* Tablet trở xuống */
@media (max-width: 991.98px) {
  :root {
    --fs-h1: 2.25rem;   /* 36px */
    --fs-h2: 1.75rem;   /* 28px */
    --section-gap: 64px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  :root {
    --fs-h1:   1.875rem; /* 30px */
    --fs-h2:   1.5rem;   /* 24px */
    --fs-h3:   1.1875rem;/* 19px */
    --fs-body: 0.9375rem;/* 15px */
    --fs-sm:   0.8125rem;/* 13px */

    --section-gap:  48px;
    --card-padding: 20px;
    --gutter:       16px;
  }
}

/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition:      0ms;
    --transition-slow: 0ms;
  }
}