/* Design tokens — trích từ knxstore.vn (Next.js + Tailwind), ngày 2026-10-13.
   Giá trị lấy từ CSS/HTML của site. Vai trò (role) là suy luận, cần Tùng/Vũ xác nhận. */

:root {
  /* ---------- Font ---------- */
  --font-body: "Onest", "Onest Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Toàn bộ chữ dùng Onest (theo yêu cầu). Font gốc của site giữ lại ở dưới để đối chiếu / quay lại. */
  --font-matter: var(--font-body);        /* site gốc: "Inter" cho khu Matter */
  --font-mono: var(--font-body);          /* site gốc: "JetBrains Mono" cho mã sản phẩm, thông số */
  --font-matter-original: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono-original: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Cỡ chữ: site dùng nhiều leading cố định px (18/20/24) trên chữ nhỏ */
  --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 */
  --lh-tight: 1.25;
  --lh-snug: 1.35;        /* site: leading-[1.35] */
  --lh-body: 1.5;
  --tracking-wide: 0.025em;

  /* Thang chữ dùng chung cho tiêu đề / eyebrow / mô tả của mọi section (chữ cỡ display riêng: .mf-text, .dv-title, .pr-name, .statement-title giữ nguyên) */
  --h2-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);        /* 28 -> 44px, tăng đều theo độ rộng */
  --h2-weight: 600;
  --h2-lh: 1.1;
  --h2-tracking: -0.02em;
  --h3-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);              /* 17.6 -> 21.6px */
  --h3-weight: 600;
  --h3-tracking: -0.01em;
  --label-size: clamp(.75rem, .72rem + .1vw, .8125rem);       /* 12 -> 13px: sàn cho nhãn, chú thích, số đếm (không nhỏ hơn 12px) */
  --eyebrow-size: var(--label-size);
  --eyebrow-weight: 500;
  --eyebrow-tracking: 0.08em;
  --text-sm: clamp(.875rem, .85rem + .1vw, .9375rem);         /* 14 -> 15px: mô tả phụ */
  --body-size: clamp(1rem, .95rem + .15vw, 1.0625rem);        /* 16 -> 17px */
  --body-lh: 1.5;

  /* ---------- Màu thương hiệu (xanh navy-blue) ---------- */
  --color-brand-900: #071426;   /* nền tối nhất (hero/footer) */
  --color-brand-800: #124F92;
  --color-brand-700: #14467C;   /* PRIMARY — trùng meta theme-color */
  --color-brand-600: #1868C2;   /* primary sáng, link/nút phụ */
  --color-brand-100: #EAF2FF;   /* nền nhạt (chip, highlight) */
  --color-brand-50:  #F7FAFE;   /* nền section xanh rất nhạt */

  /* ---------- Màu chữ ---------- */
  --color-ink-heading: #101828;   /* tiêu đề */
  --color-ink-navy:    #1C274C;   /* chữ navy phụ */
  --color-ink-body:    #3F3F46;   /* zinc-700, body chính */
  --color-ink-muted:   #52525B;   /* zinc-600, chữ phụ (site dùng nhiều nhất) */
  --color-ink-subtle:  #71717A;   /* zinc-500, chỉ dùng cỡ lớn/meta */
  --color-ink-on-dark: #FFFFFF;

  /* ---------- Nền & viền ---------- */
  --color-bg:        #FFFFFF;
  --color-bg-subtle: #FAFAFA;   /* zinc-50 */
  --color-bg-muted:  #F4F4F5;   /* zinc-100 */
  --color-border:        #E4E4E7;   /* zinc-200, viền chính (site dùng ~470 lần) */
  --color-border-strong: #A1A1AA;   /* zinc-400 */

  /* ---------- Accent ---------- */
  --color-accent-orange-700: #14467C;   /* link accent, chữ trên nền sáng */
  --color-accent-orange-600: #1A5696;   /* hover / icon trending */
  --color-accent-orange-400: #7DB3E8;   /* điểm nhấn trên nền tối */
  --color-accent-cyan-600:   #0E7FA3;   /* gradient Matter (cuối) */
  --color-accent-cyan-400:   #22C9DC;   /* gradient Matter (đầu), chỉ dùng làm nền/gradient */
  --gradient-matter: linear-gradient(90deg, #22C9DC, #0E7FA3);
  --color-zalo: #0068FF;   /* nút Zalo, giữ nguyên màu nhận diện */

  /* ---------- Hình khối ---------- */
  --radius-sm: 0.25rem;   /* "rounded" mặc định của Tailwind */
  --radius-md: 0.375rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* ---------- Layout ---------- */
  --container-field: min(100%, 1680px);   /* site: --knx-field */
  --container-prose: 860px;
}