/* ============================================================
   Honda Showroom — Design Tokens
   CHỈ chứa :root CSS variables. Không viết rule nào khác.
   Tất cả component/layout đều import file này đầu tiên.
   ============================================================ */

/* Be Vietnam Pro — font của honda.com.vn (SIL OFL, xem assets/fonts/OFL-NOTE.txt).
   Ba file woff2 tự host đã subset Latin + tiếng Việt (~15 KB/file): 400 thân bài/mô tả/ô nhập, 600 mọi tiêu đề (H1–H6, tên thẻ),
   menu, nhãn trường; 700 nút, giá, badge/nhãn IN HOA, tiêu đề cột bảng. Chỉ dùng 400, 600 và 700 (không có file 300, 500, 800). KHÔNG dùng Google Fonts CDN. font-display: swap + fallback hệ thống. */
@font-face { font-family: 'Be Vietnam Pro'; src: url('../fonts/BeVietnamPro-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('../fonts/BeVietnamPro-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('../fonts/BeVietnamPro-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Gộp màu (14/10/2026): mọi token trùng hoặc gần trùng một ô Astra Global đều là alias tới ô đó
     (#F4F6F8 ← soft/mist/sunken/hero-start · #1A1A1A ← heading/body · #595959 ← muted/subtle ·
     #FFFFFF ← elevated/inverse · #FDECEC ← tint-soft/error-bg · #990000 ← cta-hover/error-text · #CC0000 ← error).
     Token trùng giữa các nhóm còn lại cũng alias nhau (info=hybrid, eco=success, neutral=border-input, hero-end=border).
     Ngoại lệ có chủ đích: nền tối #111111 (nút đỏ trên #1A1A1A chỉ 2.96:1 < 3:1). Tên token giữ nguyên để không phải sửa CSS khác. */

  /* ── Brand Colors ─────────────────────────────────────────────────
     Alias tới Astra Global Colors (--ast-global-color-N,
     gia tri that duoc quan ly trong Customizer > Global > Colors).
     Day la NGUON SU THAT DUY NHAT — sua mau brand phai sua o Astra
     Customizer, khong sua hardcode o day. Xem DESIGN_SYSTEM.md muc
     "Token Ownership".
     ------------------------------------------------------------- */
  --color-brand-primary:    var(--ast-global-color-0);
  --color-brand-deep:       #01334E;   /* navy Honda (như automobiles.honda.com): chữ tiêu đề, nền tối KHÔNG có nút đỏ */
  --color-brand-electric:   var(--ast-global-color-1);
  --color-brand-light:      var(--ast-global-color-4);

  /* Sắc độ phụ của navy — dùng cho gradient/glow, KHÔNG có slot Astra tương ứng.
     Bốn giá trị này trước đây ghi thẳng trong homepage.css/components.css nên
     đổi màu brand không lan tới chúng. Tách thành token ngày 20/09/2026. */
  --color-brand-deep-soft:  #00446B;   /* thanh xe dính, như automobiles.honda.com */
  --color-brand-deep-mid:   var(--color-hybrid);   /* cuối gradient navy → xanh Honda */
  /* Nền tối trung tính cho khối có nút đỏ: nút #CC0000 trên #111111 đạt 3.21:1, trên navy chỉ 2.25:1 (< 3:1). */
  --color-surface-ink:      #111111;
  --color-surface-ink-soft: #1F2124;
  --color-surface-ink-mid:  #2A2D31;
  --color-brand-tint:       #F6C9C9;
  --color-brand-tint-soft:  var(--ast-global-color-4);
  --color-hero-start:       var(--ast-global-color-6);
  --color-hero-end:         var(--color-border);

  --color-cta-primary:      var(--ast-global-color-7);
  --color-cta-hover:        var(--ast-global-color-1);
  --color-cta-active:       #7A0000;
  --gradient-action:        var(--color-cta-primary);
  --color-focus:            var(--color-hybrid-strong);

  /* ── Neutral ──────────────────────────────────────────── */
  --color-surface:          var(--ast-global-color-5);  /* White */
  --color-surface-alt:      var(--ast-global-color-6);
  --color-surface-elevated: var(--ast-global-color-5);
  --color-surface-dark:     var(--color-brand-deep);
  --color-surface-dark-card:var(--color-brand-deep-soft);
  /* Trang chi tiết xe (handoff VDP 29/09/2026) — sắc độ trung tính riêng. */
  --color-text-heading:     var(--ast-global-color-2);
  --color-text-body:        var(--ast-global-color-2);
  --color-text-subtle:      var(--ast-global-color-3);
  --color-text-on-dark:     #F2F2F2;
  --color-brand-on-dark:    #FF6B6B;
  --color-surface-soft:     var(--ast-global-color-6);
  --color-surface-sunken:   var(--ast-global-color-6);
  --color-surface-mist:     var(--ast-global-color-6);
  --color-border:           #E6E6E6;
  --color-border-strong:    #CCD0D3;

  --color-text-primary:     var(--ast-global-color-2);
  --color-text-secondary:   var(--ast-global-color-3);
  --color-text-muted:       var(--ast-global-color-3);
  --color-text-inverse:     var(--ast-global-color-5);
  --color-neutral-black:    var(--ast-global-color-8);  /* chỉ dùng cho bóng đổ trung tính, không phải màu brand */

  /* ── Semantic ─────────────────────────────────────────── */
  --color-success:          #10B981;
  --color-success-bg:       #ECFDF5;
  --color-warning:          #F59E0B;
  --color-warning-bg:       #FFFBEB;
  --color-error:            var(--ast-global-color-0);
  --color-error-bg:         var(--ast-global-color-4);
  --color-error-text:       var(--ast-global-color-1);   /* chữ lỗi trên nền nhạt (≥ 4.5:1); --color-error chỉ cho viền/icon */
  --color-info:             var(--color-hybrid);
  --color-info-bg:          var(--color-hybrid-soft);

  /* Badge — sắc độ đậm hơn màu semantic gốc để đạt tương phản AA trên nền tint.
     Trước đây ghi thẳng trong components.css (bước 1 dọn nợ đồng bộ 20/09/2026). */
  --color-accent-warm:      #C44700;   /* chữ badge cam */
  --color-accent-warm-bg:   #FFF4EB;   /* nền badge cam */
  --color-success-strong:   #0B7A55;

  /* ── Brand bên thứ ba ─────────────────────────────────── */
  --color-zalo:             #0068FF;   /* màu nhận diện Zalo */

  /* ── Honda: Hybrid, trung tính, Eco (mockup Colors 13/10/2026) ──────────────
     Chỉ thêm token Astra không có slot. Xanh Hybrid CHỈ dùng cho xe/khối e:HEV;
     Eco/Success làm nền, chấm, icon — chữ dùng --color-success-strong. */
  --color-hybrid:           #0074B3;   /* xanh Honda: nút phụ, link, thanh điều hướng, xe/khối e:HEV (trắng/xanh 5.06:1) */
  --color-hybrid-strong:    #0057B8;   /* chữ trên nền nhạt, vòng focus */
  --color-hybrid-soft:      #E8F1FB;
  --color-hybrid-line:      #B9D6FF;   /* viền nhạt khối Hybrid trên nền sáng */
  --color-hybrid-on-dark:   #62C7FF;   /* link/nhãn xanh trên nền tối (7.0:1 trên navy) */
  --color-neutral:          var(--color-border-input);   /* disabled, icon phụ; viền ô nhập ≥ 3:1 */
  --color-border-input:     #8A8D91;
  --color-placeholder:      #6E6E73;   /* chữ placeholder ≥ 4.5:1 */
  --color-eco:              var(--color-success);
  --color-eco-text:         var(--color-success-strong);

  /* ── Overlay ──────────────────────────────────────────── */
  --color-overlay-dark:     rgba(26, 26, 26, 0.72);
  --color-overlay-medium:   rgba(26, 26, 26, 0.50);
  --color-overlay-light:    rgba(255, 255, 255, 0.92);

  /* ── Typography ───────────────────────────────────────── */
  --font-display: '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;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* Scale (Major Third — 1.25) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Weight */
  /* Chỉ hai độ đậm có file font. Đừng thêm 500, 600, 800: trình duyệt sẽ tự giả lập hoặc nhảy về 400/700. */
  --font-normal:    400;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.01em;   /* không dùng cho tiêu đề IN HOA: chữ hoa tiếng Việt cần giãn chữ 0 */
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Typography ngữ nghĩa (fluid) — 03/10/2026 ─────────────
     Cỡ chữ heading co giãn tuyến tính từ màn 360px (min) tới 1280px
     (= --container-max, max), bám đúng thang --text-* ở trên:
       H1 32→54 · H2 28→44 · H3 20→22 · H4 18→20 · H5 16→18 · H6 14→16 (px)  (H1/H2 theo automobiles.honda.com: 54/44px)
     Công thức: clamp(min, b + m·vw, max), m = (max−min)/920px, b = min − m·360px.
     Phần b viết bằng rem để người dùng phóng to chữ trình duyệt vẫn có tác dụng (WCAG 1.4.4).
     Thân bài giữ cố định 16px: cỡ tối thiểu trên di động, không co nhỏ hơn.
     Map vào Astra/Gutenberg ở typography.css; vào Block Editor qua theme.json. */
  --font-size-h1:   clamp(2rem,     1.462rem  + 2.391vw,  3.375rem);
  --font-size-h2:   clamp(1.75rem,  1.3587rem + 1.7391vw, 2.75rem);
  --font-size-h3:   clamp(1.25rem,  1.2011rem + 0.2174vw, 1.375rem);
  --font-size-h4:   clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
  --font-size-h5:   clamp(1rem,     0.9511rem + 0.2174vw, 1.125rem);
  --font-size-h6:   clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem);
  --font-size-body: var(--text-base);

  /* Thang chữ Material Design 3 (trang chi tiết bài viết, 22/10/2026): vai trò Display · Headline · Title · Body · Label,
     mobile < 768 là mặc định, tablet ≥ 768 và desktop ≥ 1024 đổi ở khối @media cuối file. Line-height theo lưới 4px.
     Sàn 14px của DS: Body Small/Label Small của Material (12/11) nâng lên 14. Độ đậm vẫn 400/600/700 (font không có 500). */
  --type-display-size:      2rem;      --type-display-line:      2.5rem;    /* 32/40 → 36/44 → 45/52 */
  --type-headline-size:     1.5rem;    --type-headline-line:     2rem;      /* 24/32 → 28/36 → 32/40 */
  --type-title-lg-size:     1.375rem;  --type-title-lg-line:     1.75rem;   /* 22/28 */
  --type-title-md-size:     1rem;      --type-title-md-line:     1.5rem;    /* 16/24 */
  --type-body-lg-size:      1rem;      --type-body-lg-line:      1.75rem;   /* 16/28 (Material: 16/24; dòng 28 cho đọc dài) */
  --type-body-md-size:      0.875rem;  --type-body-md-line:      1.25rem;   /* 14/20 */
  --type-label-lg-size:     0.875rem;  --type-label-lg-line:     1.25rem;   /* 14/20 */

  /* Sàn chữ (chuẩn hoá 14/10/2026): chữ cần đọc không nhỏ hơn 14px (--text-sm).
     --text-xs (12px) chỉ cho badge IN HOA đậm rất ngắn (NEW, HOT) và nút nhỏ. */

  /* Token fluid bổ sung (03/10/2026) — thay clamp() viết tay trong CSS từng trang.
     Cùng khoảng co giãn 360px → 1280px như --font-size-h*. */
  --font-size-display:  clamp(2.375rem, 1.5924rem + 3.4783vw, 4.375rem);  /* 38→70 — hero lưu trữ xe */
  --font-size-body-lg:  clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);  /* 16→18 — lead, thân bài viết */
  --font-size-title:    clamp(1.375rem, 1.1793rem + 0.8696vw, 1.875rem);  /* 22→30 — tiêu đề khối giữa h2 và h3 */
  --space-fluid-sm:     clamp(1.25rem, 0.9565rem + 1.3043vw, 2rem);  /* 20→32 */
  --space-fluid-md:     clamp(2rem, 1.7065rem + 1.3043vw, 2.75rem);  /* 32→44 */
  --space-fluid-lg:     clamp(2rem, 1.413rem + 2.6087vw, 3.5rem);  /* 32→56 */

  --line-height-heading: var(--leading-tight);
  --line-height-body:    var(--leading-normal);
  --line-height-prose:   var(--leading-relaxed);

  --font-weight-heading: var(--font-semibold);  /* H1–H6 */
  --font-weight-display: var(--font-semibold);   /* H1/H2: viết thường kiểu câu, màu navy */
  --color-text-display:  var(--color-brand-deep);
  --font-weight-body:    var(--font-normal);

  /* Khoảng cách quanh heading trong nội dung soạn thảo — đơn vị em nên tự co giãn theo cỡ heading */
  --space-heading-before: 1.2em;
  --space-heading-after:  0.45em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ───────────────────────────────────────────── */
  /* Bề rộng khung lấy từ Customizer (Global → Container): Astra xuất --ast-*-container-width ra :root; 1280/720 chỉ là giá trị dự phòng. */
  --container-max:      var(--ast-normal-container-width, 1280px);
  --container-wide:     1440px;
  --container-narrow:   var(--ast-narrow-container-width, 720px);
  --container-px:       var(--space-3); /* 12px mỗi bên trên mobile (< 768px) */
  --container-px-md:    2rem;      /* padding sides tablet+ */
  --container-gutter:   var(--container-px); /* lề khung nội dung: tự đổi theo màn hình, xem @media bên dưới */

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-2xl:  8px;
  --radius-full: 9999px;

  /* ── Shadows — tinted with Deep Navy, not pure black ─── */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-inset: none;

  /* Brand shadow (CTA button) */
  --shadow-brand: none;
  --shadow-brand-lg: none;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ──────────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Section Spacing ──────────────────────────────────── */
  --section-py:    var(--space-16);   /* 64px default */
  --section-py-sm: var(--space-12);   /* 48px compact */
  --section-py-lg: var(--space-24);   /* 96px hero-like */
  /* Đệm trên/dưới của khối nội dung (không gồm hero/footer): mobile 16px, tablet + desktop 20px. */
  --block-py:      var(--space-4);
}
@media (min-width: 768px) {
  :root { --container-gutter: var(--container-px-md); --block-py: var(--space-5); }
}
/* Tablet: khối nội dung sát lề 12px như mobile (header, top header, footer giữ 2rem — site-header-footer.css). */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --container-px-md: var(--space-3); }
}
@media (min-width: 768px) {
  :root {
    --type-display-size: 2.25rem;  --type-display-line: 2.75rem;
    --type-headline-size: 1.75rem; --type-headline-line: 2.25rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --type-display-size: 2.8125rem; --type-display-line: 3.25rem;
    --type-headline-size: 2rem;     --type-headline-line: 2.5rem;
  }
}

/* ── Dark mode overrides (future-proof) ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Chỉ enable nếu cần dark mode. Hiện tại site sáng. */
    /* --color-surface: #0d1117; */
  }
}