/* Design tokens — nguồn sự thật duy nhất về màu, font, kích thước. Thiếu token thì thêm ở đây trước, không viết giá trị rời trong CSS trang. */
:root{
  /* Nền & chữ trên nền sáng */
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --ink:#15121C;
  --ink-soft:#54506B;
  --line:#E9E6F2;

  /* Chữ trên nền tối (--ink) */
  --on-dark:#FFFFFF;
  --on-dark-soft:#C9C5DB;
  --on-dark-muted:#9C97B5;

  /* Màu thương hiệu */
  --violet:#6E38E8;
  --violet-deep:#4E22B0;
  --violet-soft:#B69BF5;
  --violet-bg:#EFE7FC;
  --coral:#FF5B67;
  --coral-light:#FF7B84;
  --coral-bg:#FFE8E9;
  --gradient-hero:linear-gradient(105deg,#8053EB 0%,#9A71F7 50%,#FF707A 100%);

  /* Font */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Be Vietnam Pro',system-ui,sans-serif;

  /* Thang cỡ chữ */
  --fs-xs:0.8rem;
  --fs-sm:0.88rem;
  --fs-md:0.95rem;
  --fs-base:1rem;
  --fs-lg:1.15rem;
  --fs-xl:1.35rem;
  --fs-2xl:2.2rem;
  --fs-h2:clamp(1.8rem,3.4vw,2.6rem);
  --fs-h1:clamp(2.4rem,5.4vw,4rem);

  /* Spacing — bội số 4px */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;

  /* Bo góc */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:28px;
  --r-pill:100px;

  /* Viền & bóng */
  --bw:2px;
  --border:var(--bw) solid var(--ink);
  --border-soft:var(--bw) solid var(--line);
  --shadow-hard:8px 8px 0 var(--ink);
  --shadow-halo:0 0 2px rgba(255,255,255,0.85);

  /* Bề rộng */
  --w-max:1160px;
  --w-md:960px;
  --w-read:800px;
  --w-narrow:640px;
  --w-form:480px;
  --w-text:56ch;

  /* Breakpoint (CSS không cho var() trong @media, ghi đây để tra): md = 640px, lg = 900px */
}