/* ===================================================================
   TK Construction — 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.

   Nhận diện lấy từ docs/TKConstruction/home-page.jpg:
     - xanh navy (thanh trên header, tiêu đề, section "Thiết kế kiến trúc")
     - cam (nút, menu đang chọn, dải cam kết, chân trang)

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

:root {
    /* ---- Màu thương hiệu ---- */
    --c-primary: #0b4a86;          /* tiêu đề, link, nút phụ */
    --c-primary-dark: #0a3a6b;     /* nền section tối */
    --c-primary-darker: #072b50;   /* nền tối nhất */
    --c-primary-soft: #1667b4;     /* đầu sáng của gradient thanh trên header */
    --c-primary-mist: #eaf1f9;     /* nền rất nhạt */
    --c-accent: #E64910;           /* cam: nút, menu đang chọn, nhãn */
    --c-accent-dark: #d8500f;      /* cam đậm: hover */
    --c-accent-light: #f99a2c;     /* cam sáng: đầu sáng của gradient */
    --c-accent-soft: #fff1e8;      /* cam rất nhạt: nền icon */

    /* Gradient dùng lại nhiều nơi */
    --g-accent: linear-gradient(180deg, var(--c-accent-light) 0%, var(--c-accent) 100%);
    --g-accent-x: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-light) 100%);
    --g-primary: linear-gradient(90deg, var(--c-primary-soft) 0%, var(--c-primary-dark) 100%);

    /* ---- Màu trung tính ---- */
    --c-ink: #1d2733;              /* chữ tiêu đề trung tính */
    --c-body: #4a4f57;             /* chữ thân bài */
    --c-muted: #6f7782;            /* chữ phụ */
    --c-line: #e1e6ed;             /* viền */
    --c-line-soft: #eef1f5;        /* viền rất nhạt */
    --c-bg: #ffffff;
    --c-bg-soft: #f6f7f9;          /* nền section xen kẽ (nền giấy bản vẽ) */
    --c-white: #ffffff;

    /* Lớp phủ trên ảnh (dùng rgba của navy) */
    --c-overlay: rgba(7, 43, 80, .78);
    --c-overlay-soft: rgba(7, 43, 80, .35);

    /* ---- Trạng thái ---- */
    --c-success: #1a7f4b;
    --c-danger: #c62828;
    --c-star: #f5a524;
    --c-success-soft: #e3f3ea;
    --c-danger-soft: #fdeaea;
    --c-info: #0b4a86;
    --c-info-soft: #e7eef7;

    /* ---- Chữ ----
       Lexend cho tiêu đề (dáng hình học như bản thiết kế), Be Vietnam Pro cho thân bài.
       <link> Google Fonts nằm ở Frontend/MasterPage.master. */
    --font-display: "Inter", "Bai Jamjuree", "Segoe UI", system-ui, Arial, sans-serif;
    --font-base: "Bai Jamjuree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --fs-hero: clamp(2.25rem, 5vw, 3.5rem);
    --fs-statement: clamp(1.75rem, 3.2vw, 2.5rem);
    --fs-h1: clamp(1.75rem, 3.4vw, 2.5rem);
    --fs-h2: clamp(1.625rem, 3vw, 2.25rem);
    --fs-h3: clamp(1.0625rem, 1.4vw, 1.25rem);
    --fs-lead: clamp(1rem, 1.2vw, 1.125rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-kicker: 1.125rem;

    /* ---- Khoảng cách ---- */
    --sp-section: clamp(48px, 6vw, 72px);
    --sp-block: clamp(24px, 3.5vw, 40px);
    --container: 1236px;
    --container-narrow: 880px;

    /* ---- Hình khối ---- */
    --radius: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --rule: 3px;
    --shadow-sm: 0 2px 10px rgba(7, 43, 80, .07);
    --shadow: 0 10px 28px rgba(7, 43, 80, .12);
    --shadow-lg: 0 22px 50px rgba(7, 43, 80, .22);
    /* Bóng/viền màu cam cho nút & ô nhập đang focus (rgba của --c-accent) */
    --shadow-accent: 0 6px 16px rgba(242, 101, 34, .28);
    --shadow-accent-lg: 0 10px 22px rgba(242, 101, 34, .34);
    --ring-accent: 0 0 0 3px rgba(242, 101, 34, .15);

    /* Chiều cao header (thanh trên 40px + menu 52px) */
    --header-h: 110px;
    --header-h-sm: 64px;
    --topbar-h: 40px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: .18s var(--ease);
    --t: .28s var(--ease);
}