/* ============================================================
   QASOFT — Design tokens
   Nguồn chân lý thiết kế: DESIGN.md ("Bản vẽ đang được đánh dấu")
   Nền trắng thuần là tờ giấy; navy/teal của logo là nét bút.
   ============================================================ */

/* ---- Font: Be Vietnam Pro (static weights, self-host) ----
   Font chuyên nghiệp thiết kế trước hết cho tiếng Việt — dấu chồng
   (ế, ộ, ữ, ẳ) là first-class, hợp giọng doanh nghiệp.
   4 trọng lượng: 400 body · 600 nhấn · 700 title · 800 display. */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-400-vietnamese.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-600-vietnamese.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-700-vietnamese.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-800-vietnamese.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-800-latin-ext.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/bvp-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Màu: lấy trực tiếp từ logo QASOFT ----
     navy #124366 · xanh #0f6c9c · teal #1997bb (đo từ logo-qasoft.png) */
  --white: oklch(1 0 0);              /* Tờ giấy. Đúng bằng #ffffff. */
  --ink: oklch(0.24 0.028 255);       /* Mực — near-black cùng họ navy. ≥7:1 trên trắng */
  --ink-soft: oklch(0.44 0.035 240);  /* Mực nhạt — chữ phụ, ≥4.5:1 trên trắng */
  --surface: oklch(0.962 0.008 230);  /* Bề mặt — trắng kéo nhẹ về xanh logo */
  --line: oklch(0.885 0.015 230);     /* Đường kẻ mảnh */

  --navy: oklch(0.37 0.079 244);      /* #124366 — mảng lớn; trắng trên navy ≈10:1 */
  --navy-deep: oklch(0.29 0.062 245); /* Navy tối — nền hero đậm, hover */
  --blue: oklch(0.506 0.109 239);     /* #0f6c9c — nút, link; trắng trên xanh ≈5.7:1 */
  --teal: oklch(0.63 0.113 224);      /* #1997bb — accent, số lớn trên navy (chữ to) */
  --teal-bright: oklch(0.78 0.1 215); /* Teal sáng — gạch/vệt nhấn trên nền navy ≈5:1 */
  --mark: oklch(0.9 0.062 215);       /* Vệt highlight sau chữ mực trên nền trắng */

  /* Chữ trên mảng navy (Quy tắc Chữ Trắng Trên Mảng Màu) */
  --on-dark: var(--white);
  --on-dark-soft: oklch(0.87 0.035 230);

  /* ---- Chữ: một họ duy nhất, tương phản bằng trọng lượng ---- */
  --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system,
    sans-serif;

  --text-display: clamp(2.375rem, 1.15rem + 4.9vw, 4.25rem);
  --text-headline: clamp(1.875rem, 1.05rem + 3vw, 3rem);
  --text-title: clamp(1.25rem, 1.08rem + 0.65vw, 1.5rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;

  --leading-display: 1.06;
  --leading-heading: 1.12;
  --leading-body: 1.65;

  /* ---- Khoảng cách: thang 4pt ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(4.5rem, 3rem + 6vw, 8rem);   /* nhịp giữa các section */

  --container: 72rem;
  --measure: 62ch;

  /* ---- Bo góc: nét hiện đại, hai mức ---- */
  --radius-md: 14px;                  /* thẻ, ô logo, nút lớn */
  --radius-lg: 26px;                  /* panel lớn (CTA) */

  /* ---- Chuyển động: phản hồi, không trình diễn ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-feedback: 160ms;
  --dur-state: 260ms;
  --dur-ink: 620ms;                   /* vệt bút được vẽ vào */

  /* ---- Bóng: chỉ khi tương tác (Quy tắc Phẳng Mặc Định) ---- */
  --shadow-hover: 0 6px 20px oklch(0.37 0.079 244 / 0.18);
  --shadow-nav: 0 1px 12px oklch(0.37 0.079 244 / 0.1);

  /* ---- Z-scale ngữ nghĩa ---- */
  --z-nav: 10;
}