/*
  Design tokens — Landing Chuỗi Phòng khám · MiO Health
  Mọi giá trị màu/chữ/khoảng cách của trang đều đi qua biến CSS ở đây.
  Đổi một chỗ, toàn trang đổi theo.
*/

:root {
  /* ---- Màu thương hiệu (lấy từ MIO.pdf — Logo Branding, không phải màu ước lượng) ---- */
  --brand-blue:      #01568A;
  --brand-blue-deep: #0A4165;
  --brand-red:       #EC1C24;
  --brand-gradient:  linear-gradient(135deg, #01568A, #0A4165);

  /* ---- Thang xanh dẫn xuất (ước lượng theo brand-blue, CẦN designer/MIO xác nhận nếu có bảng chính thức khác) ---- */
  --blue-50:  #EAF3F8;
  --blue-100: #CFE4EE;
  --blue-200: #A0C9DD;
  --blue-300: #71AECC;
  --blue-400: #4293BB;
  --blue-500: #1D77A3;
  --blue-600: #01568A; /* = brand-blue */
  --blue-700: #014570;
  --blue-800: #0A4165; /* = brand-blue-deep */
  --blue-900: #06304C;

  /* ---- Trung tính (hơi ngả xanh để hợp với brand) ---- */
  --ink-900: #0F2430; /* chữ chính / heading */
  --ink-700: #33495A; /* chữ thân */
  --ink-500: #5C7186; /* chữ phụ */
  --ink-400: #8A9AA8; /* chữ mờ / placeholder */
  --line:        #E4E9ED;
  --line-strong: #C9D3DA;
  --surface:      #FFFFFF;
  --bg-soft:      #F5F8FA;
  --surface-blue: #EAF3F8; /* = blue-50, dùng cho nền section xen kẽ */
  --red-50:  #FDEDEE;

  /* ---- Chữ — Be Vietnam Pro ---- */
  --font-base: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);   /* 36–56px — headline hero */
  --fs-h1:      clamp(1.85rem, 1.5rem + 1.4vw, 2.5rem);    /* 30–40px */
  --fs-h2:      clamp(1.5rem, 1.3rem + 0.8vw, 2rem);       /* 24–32px */
  --fs-h3:      1.375rem;                                   /* 22px */
  --fs-lead:    1.25rem;                                    /* 20px */
  --fs-body:    1rem;                                       /* 16px */
  --fs-sm:      0.875rem;                                   /* 14px */
  --fs-xs:      0.8125rem;                                  /* 13px */
  --fs-micro:   0.75rem;                                    /* 12px */
  --ls-tight:   -0.02em;
  --ls-eyebrow: 0.08em;

  /* ---- Khoảng cách — thang 4px ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-9: 36px;  --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---- Bo góc ---- */
  --r-sm:   8px;   /* phụ: chip, input */
  --r-btn:  10px;  /* nút */
  --r-card: 16px;  /* card */
  --r-lg:   20px;  /* khối lớn: bảng so sánh, card đề xuất đầu tư */
  --r-pill: 999px; /* chip tròn, logo pill */

  /* ---- Bóng đổ (ngả xanh brand, không dùng đen thuần) ---- */
  --sh-sm: 0 1px 2px rgba(10,36,48,.06), 0 1px 1px rgba(10,36,48,.04);
  --sh-md: 0 6px 16px rgba(10,36,48,.08);
  --sh-lg: 0 12px 28px rgba(10,36,48,.12);
  --sh-xl: 0 24px 48px rgba(10,36,48,.16);

  /* ---- Layout ---- */
  --container-max: 1180px;
}