/* ===================================================================
   BNE Lawyers — 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.
   =================================================================== */

:root {
    /* ---- Màu thương hiệu (theo logo: navy + vàng đồng) ---- */
    --c-primary: #0e2452;          /* navy chủ đạo */
    --c-primary-dark: #08183a;     /* navy đậm - nền tối */
    --c-primary-darker: #061229;   /* navy đen - footer */
    --c-primary-soft: #1d3a70;     /* navy nhạt - gradient */
    --c-primary-mist: #eef1f7;     /* navy rất nhạt - nền section */
    --c-accent: #c8a24a;           /* vàng đồng - CTA, đường kẻ, icon */
    --c-accent-dark: #a8853a;      /* vàng đậm - hover */
    --c-accent-soft: #f3e9d2;      /* vàng nhạt - nền nhấn */

    /* ---- Màu trung tính ---- */
    --c-ink: #1b2430;              /* chữ chính */
    --c-body: rgb(27,43,50);             /* chữ thân bài */
    --c-muted: #6b7686;            /* chữ phụ */
    --c-line: #e2e6ee;             /* viền */
    --c-line-soft: #f0f2f7;        /* viền rất nhạt */
    --c-bg: #ffffff;
    --c-bg-soft: #f5f7fb;          /* nền section xen kẽ */
    --c-white: #ffffff;

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

    /* ---- Chữ ---- */
    --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
    --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-hero: clamp(2.5rem, 6vw, 4.0rem);
    /* 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 4.75rem xuống h2 2.6rem và phần giữa trang đọc rất phẳng. */
    --fs-statement: clamp(1.875rem, 3.4vw, 2.875rem);
    --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: 1rem;
    --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 ---- */
    --radius: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --rule: 3px;                   /* độ dày thanh vàng dưới tiêu đề */
    --shadow-sm: 0 2px 10px rgba(14, 36, 82, .06);
    --shadow: 0 10px 30px rgba(14, 36, 82, .09);
    --shadow-lg: 0 24px 60px rgba(6, 18, 41, .18);
    --header-h: 140px;
    --header-h-sm: 68px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: .18s var(--ease);
    --t: .28s var(--ease);
}