/* ============================================================
   MAS DESIGN SYSTEM — tokens.css  (nguồn chân lý duy nhất)
   Phong cách: "Blueprint & Cam công trường" — bản vẽ kỹ thuật,
   đường nét precision, thông tin dày, nghiêm túc & đáng tin.
   Mở rộng từ mục 5.0 runbook thành thang màu + type scale đầy đủ.

   Quy ước: biến ngữ nghĩa (--c-*, --fs-*, --sp-*) là thứ component
   dùng hằng ngày; thang gốc (--navy-*, --orange-*, --slate-*) chỉ để
   dẫn xuất ra biến ngữ nghĩa — đừng gọi thẳng thang gốc trong component.
   ============================================================ */

:root{
  /* ---------- THANG MÀU GỐC -------------------------------- */
  /* Navy — xanh bản vẽ kỹ thuật (dẫn từ #0D3B66) */
  --navy-900:#071F38;
  --navy-800:#092C4C;   /* primary-dark */
  --navy-700:#0D3B66;   /* primary */
  --navy-600:#124A80;
  --navy-500:#1A5FA0;
  --navy-400:#3A7BBD;
  --navy-300:#6FA1D4;
  --navy-200:#A9C6E6;
  --navy-100:#D6E3F2;
  --navy-50 :#EEF4FA;

  /* FIELD ORANGE — cam áo phản quang / cờ flagging / sơn đánh dấu hiện
     trường (dẫn từ #F26522 / #C2410C). Dùng như sơn mốc, KHÔNG phải fill
     phẳng generic. */
  --orange-700:#9A330A;
  --orange-600:#C2410C;  /* CTA nền — chữ trắng đạt WCAG AA */
  --orange-500:#E85718;
  --orange-400:#F26522;  /* field orange — icon, viền nhấn, cờ mốc */
  --orange-300:#F78A55;
  --orange-200:#FBB489;
  --orange-100:#FDE0CF;
  --orange-50 :#FEF2EA;

  /* BRASS — màu đĩa mốc trắc địa (đồng thau). Accent thứ ba, dùng HIẾM:
     điểm nhấn mốc, đường viền title block, giá trị dung sai. */
  --brass-700:#6E5326;
  --brass-600:#8A6D3B;
  --brass-500:#B0894F;
  --brass-300:#D8BE8A;
  --brass-100:#EFE2C6;
  --brass-50 :#F7F1E2;

  /* Trung tính lạnh (slate) */
  --slate-900:#16232E;   /* ink — chữ chính */
  --slate-700:#2C3A45;
  --slate-600:#45525D;
  --slate-500:#5A6B7B;   /* muted */
  --slate-400:#8496A3;
  --slate-300:#B3C0C9;
  --slate-200:#D7DFE7;   /* line */
  --slate-100:#E7EDF2;
  --slate-50 :#F4F7FA;   /* bg section */
  --white:#FFFFFF;

  /* Trạng thái */
  --green-600:#1F8A4C;
  --amber-600:#C77700;
  --red-600:#C62828;

  /* ---------- BIẾN NGỮ NGHĨA (component dùng cái này) ------ */
  --c-primary:      var(--navy-700);
  --c-primary-dark: var(--navy-800);
  --c-primary-soft: var(--navy-50);
  --c-accent:       var(--orange-400);
  --c-accent-soft:  var(--orange-50);
  --c-cta:          var(--orange-600);
  --c-cta-hover:    var(--orange-500);

  --c-heading:  var(--slate-900);
  --c-text:     var(--slate-900);
  --c-muted:    var(--slate-500);
  --c-muted-strong: var(--slate-600);
  --c-invert:   var(--white);

  --c-bg:        var(--white);
  --c-bg-alt:    var(--slate-50);
  --c-surface:   var(--white);
  --c-surface-2: var(--slate-50);
  --c-border:        var(--slate-200);
  --c-border-strong: var(--slate-300);

  --c-field:      var(--orange-400);  /* cam hiện trường — dùng như sơn mốc */
  --c-brass:      var(--brass-500);   /* accent hiếm — mốc trắc địa */
  --c-brass-soft: var(--brass-50);

  --c-success: var(--green-600);
  --c-warning: var(--amber-600);
  --c-danger:  var(--red-600);

  /* Đường lưới blueprint (nền section kỹ thuật) */
  --c-grid-line: rgba(13,59,102,.06);
  /* Vạch hazard / flagging tape (cam–navy chéo) */
  --c-tape: repeating-linear-gradient(-45deg,
            var(--orange-400) 0 12px, var(--navy-800) 12px 24px);

  /* ---------- TYPOGRAPHY ----------------------------------- */
  /* IBM Plex Sans — bản sắc kỹ thuật "chất kỹ sư", khớp concept blueprint.
     Self-host woff2 (latin + vietnamese) ở fonts.css, không dùng CDN. */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system,
               "Roboto", "Helvetica Neue", Arial, sans-serif;
  /* IBM Plex Mono cho số liệu kỹ thuật: mã máy, toạ độ, độ chính xác —
     cùng siêu họ font nên đồng bộ tuyệt đối, tín hiệu "precision". */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular",
               "Consolas", monospace;

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

  /* Type scale fluid (clamp) — mobile-first, 75% khách dùng điện thoại */
  --fs-display: clamp(2rem, 1.4rem + 3vw, 3.25rem);      /* 32→52 */
  --fs-h1:      clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem); /* 26→40 */
  --fs-h2:      clamp(1.375rem, 1.13rem + 1.2vw, 2rem);  /* 22→32 */
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem); /* 19→24 */
  --fs-h4:      1.125rem;   /* 18 */
  --fs-lg:      1.0625rem;  /* 17 */
  --fs-body:    1rem;       /* 16 */
  --fs-sm:      0.9375rem;  /* 15 */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-overline:0.75rem;    /* 12 */

  --lh-tight:1.15;
  --lh-heading:1.25;
  --lh-snug:1.4;
  --lh-body:1.65;

  --ls-tight:-0.01em;
  --ls-overline:0.14em;

  /* ---------- SPACING (thang 4px) -------------------------- */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;

  /* Nhịp dọc giữa các section trang */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---------- BO GÓC (sắc = bản vẽ kỹ thuật, không "bong bóng") */
  --r-sharp:0; --r-xs:1px; --r-sm:2px; --r-md:3px; --r-lg:5px; --r-pill:999px;

  /* ---------- ĐƯỜNG KẺ & DẤU DẬP (bản vẽ thật KHÔNG có bóng mềm) */
  --bd-hair:1px solid var(--c-border);
  --bd-strong:1px solid var(--c-border-strong);
  --bd-ink:1.5px solid var(--c-primary);

  /* Dấu dập cứng — offset không blur, như con dấu kim loại dập lên giấy */
  --stamp:3px 3px 0 0 var(--c-primary);
  --stamp-dark:3px 3px 0 0 var(--c-primary-dark);
  --stamp-accent:3px 3px 0 0 var(--c-cta);
  --stamp-sm:2px 2px 0 0 var(--c-primary);
  --stamp-press:1px 1px 0 0 var(--c-primary-dark);  /* trạng thái nhấn */

  /* Viền kép — kiểu vành đĩa mốc trắc địa */
  --double:0 0 0 1.5px var(--c-primary), 0 0 0 4px var(--white), 0 0 0 5.5px var(--c-primary);

  /* Focus: nét đứt kiểu đường dóng kích thước, KHÔNG ring mềm */
  --focus-dash:1.5px dashed var(--c-cta);

  /* ---------- CHUYỂN ĐỘNG & LAYER ------------------------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.12s; --dur:.2s; --dur-slow:.32s;

  --z-header:100; --z-dropdown:200; --z-sticky-cta:900;
  --z-overlay:1000; --z-modal:1100;
}