/* HVSC design tokens — port sang theme WP: giữ nguyên tên biến */
:root {
  /* Brand */
  --brand: #E31E24;
  --brand-600: #D0161C;
  --brand-700: #A90F14;
  --brand-50: #FFF1F1;

  /* Neutrals (trung tính, không ngả xanh) */
  --ink: #121316;
  --ink-2: #2B2D33;
  --muted: #565A63;      /* 7:1 trên trắng */
  --muted-2: #6C707A;    /* 4.9:1 trên trắng */
  --line: #E4E5E8;
  --line-2: #D3D5DA;
  --bg: #FFFFFF;
  --surface: #FFFFFF;      /* thẻ/ô nhập/menu nổi (hv-theme.css đổi theo chế độ) */
  --surface-2: #F4F4F5;
  --on-ink: #FFFFFF;       /* chữ trên nền --ink / --acc-ink */
  --brand-ink: #D0161C;    /* đỏ dùng làm CHỮ */
  --bg-soft: #F4F4F5;
  --night: #0F1012;
  --night-2: #17181C;
  --on-night: #F3F1EC;
  --on-night-2: #C9C7C2;   /* 10:1 trên --night */

  /* Pillars: màu trang trí / màu chữ đạt AA trên nền sáng */
  --air: #F26A21;  --air-ink: #B9450C;  --air-soft: #FFF3EA;
  --tech: #6D72F6; --tech-ink: #4338CA; --tech-soft: #EEF0FF;
  --mkt: #E2337F;  --mkt-ink: #B0175E;  --mkt-soft: #FFEEF5;
  --csr: #1FA463;  --csr-ink: #137A47;  --csr-soft: #EEF7F1;
  /* Phiên bản sáng dùng trên nền tối */
  --air-hi: #FF9A5C; --tech-hi: #A7ABFF; --mkt-hi: #FF7DB6; --csr-hi: #5EDB9C;

  /* Type */
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-h3: 20px;
  --fs-h2: clamp(28px, 2.2vw + 14px, 44px);
  --fs-h2-xl: clamp(32px, 3vw + 14px, 56px);
  --fs-display: clamp(44px, 4.6vw + 12px, 88px);
  --lh-tight: 1.16;   /* đủ chỗ cho dấu tiếng Việt chồng tầng */
  --lh-body: 1.6;

  /* Space & shape */
  --gutter: 16px;
  --container: 1320px;
  --section-y: clamp(48px, 7vw, 128px);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --header-h: 72px;

  --shadow-1: 0 1px 2px rgba(18,19,22,.06), 0 2px 8px rgba(18,19,22,.05);
  --shadow-2: 0 2px 4px rgba(18,19,22,.04), 0 12px 32px -8px rgba(18,19,22,.14);
  --shadow-3: 0 4px 10px rgba(18,19,22,.05), 0 30px 70px -20px rgba(18,19,22,.30);

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--brand);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }