/* ==========================================================================
   EMR CHECK 2026 — Design Tokens
   Nguồn màu: MIO.pdf (Logo Branding) — KHÔNG sửa 3 giá trị brand bên dưới
   nếu chưa có xác nhận từ bộ phận thương hiệu MiO Health.
   ========================================================================== */

:root {
  /* ---------- 1. BRAND (lấy trực tiếp từ MIO.pdf) ---------- */
  --brand-blue:      #01568A;   /* R1  G86  B138 */
  --brand-blue-deep: #0A4165;   /* R10 G65  B101 */
  --brand-red:       #EC1C24;   /* R236 G28 B36  */
  --brand-gradient:  linear-gradient(135deg, #01568A 0%, #0A4165 100%);

  /* ---------- 2. Thang xanh dẫn xuất ---------- */
  --blue-50:  #EFF6FB;
  --blue-100: #DCEAF4;
  --blue-200: #B6D3E7;
  --blue-300: #7FB2D3;
  --blue-400: #3B8BBB;
  --blue-500: #01568A;   /* brand */
  --blue-600: #044C7A;
  --blue-700: #0A4165;   /* brand deep */
  --blue-800: #08324E;
  --blue-900: #06253A;

  /* ---------- 3. Thang đỏ dẫn xuất ---------- */
  --red-50:  #FEF2F2;
  --red-100: #FBDCDD;
  --red-500: #EC1C24;    /* brand */
  --red-600: #C8141B;
  --red-700: #9E0F15;

  /* ---------- 4. Trung tính ---------- */
  --ink-900: #0F1A24;
  --ink-700: #33465A;
  --ink-500: #5A6B7B;
  --ink-400: #8093A3;
  --ink-300: #A9B7C4;

  --line:        #E3EAF0;
  --line-strong: #CDDAE5;

  --surface:      #FFFFFF;
  --surface-soft: #F5F8FB;
  --surface-blue: #EFF6FB;
  --surface-dark: #0A4165;

  /* ---------- 5. Màu trạng thái điểm số ----------
     -bar  : dùng cho fill/biểu đồ (rực, không cần contrast chữ)
     -ink  : dùng cho chữ trên nền trắng (đã đạt contrast >= 4.5:1)
     -soft : dùng cho nền chip                                     */
  /* -ink đã kiểm bằng Lighthouse: mọi cặp đạt tương phản >= 4.5 trên nền -soft.
     Đừng làm sáng thêm nếu chưa tính lại. */
  --score-low-bar:   #EC1C24;  --score-low-ink:   #C8141B;  --score-low-soft:   #FEF2F2;
  --score-mid-bar:   #F97316;  --score-mid-ink:   #B54A08;  --score-mid-soft:   #FFF5EC;
  --score-good-bar:  #F5B301;  --score-good-ink:  #96690A;  --score-good-soft:  #FFFAEB;
  --score-high-bar:  #16A34A;  --score-high-ink:  #15803D;  --score-high-soft:  #F0FDF4;

  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #DC2626;

  /* ---------- 6. Typography ---------- */
  --font-sans: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  --font-num:  "Be Vietnam Pro", "Inter", system-ui, sans-serif;

  /* Fluid type scale — mobile 390px → desktop 1180px */
  --fs-display: clamp(2rem,    1.30rem + 3.10vw, 3.50rem);
  --fs-h1:      clamp(1.75rem, 1.28rem + 2.05vw, 2.75rem);
  --fs-h2:      clamp(1.50rem, 1.22rem + 1.24vw, 2.13rem);
  --fs-h3:      clamp(1.19rem, 1.08rem + 0.47vw, 1.44rem);
  --fs-lead:    clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-micro:   0.75rem;

  --lh-tight: 1.12;
  --lh-snug:  1.30;
  --lh-body:  1.65;

  --ls-tight: -0.022em;
  --ls-eyebrow: 0.09em;

  /* ---------- 7. Spacing (thang 4px) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-30: 120px;

  /* Padding dọc của một section */
  --section-y: clamp(56px, 4vw + 32px, 96px);

  /* ---------- 8. Bo góc (theo spec §38) ---------- */
  --r-sm:   8px;
  --r-btn:  10px;
  --r-card: 16px;
  --r-quiz: 20px;
  --r-pill: 999px;

  /* ---------- 9. Đổ bóng — ám xanh brand, không dùng đen thuần ---------- */
  --sh-sm:   0 1px 2px  rgba(10, 65, 101, .06);
  --sh-md:   0 4px 16px rgba(10, 65, 101, .08);
  --sh-lg:   0 12px 32px rgba(10, 65, 101, .10);
  --sh-xl:   0 24px 56px rgba(10, 65, 101, .14);
  --sh-focus: 0 0 0 4px rgba(1, 86, 138, .18);

  /* ---------- 10. Layout ---------- */
  --container: 1180px;
  --gutter: 20px;

  /* ---------- 11. Chuyển động ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  /* ---------- 12. Lớp z ---------- */
  --z-sticky: 40;
  --z-header: 50;
  --z-quiz:   90;
  --z-toast:  100;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}