/* =====================================================
   MAX PETRO — Typography system
   Một nguồn duy nhất cho font, size, weight, color.
   Sửa ở đây sẽ áp dụng cho tất cả section.
   ===================================================== */

:root {
  /* ----- Font families ----- */
  --max-font-base: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ----- Font sizes ----- */
  --max-fs-h1: 48px;
  --max-fs-h2: 32px;
  --max-fs-h3: 22px;
  --max-fs-h4: 16px;
  --max-fs-h5: 11px;

  --max-fs-body-lg: 17px;
  --max-fs-body: 16px;
  --max-fs-sm: 14px;
  --max-fs-caption: 12px;
  --max-fs-btn: 15px;

  --max-fs-num-lg: 32px;
  --max-fs-num-md: 22px;

  /* ----- Font weights -----
     Đã giảm headings: black/extrabold giờ map về Bold (700) cho toàn site. */
  --max-fw-regular: 400;
  --max-fw-medium: 600;
  --max-fw-bold: 700;
  --max-fw-extrabold: 700;
  --max-fw-black: 700;

  /* ----- Letter spacing ----- */
  --max-ls-h1: -0.8px;
  --max-ls-h2: -0.5px;
  --max-ls-h3: -0.3px;
  --max-ls-h4: 0;
  --max-ls-h5: 2px;
  --max-ls-num-lg: -0.8px;
  --max-ls-num-md: -0.5px;
  --max-ls-caption: 0.5px;
  --max-ls-btn: 0.3px;

  /* ----- Line heights ----- */
  --max-lh-h1: 1.1;
  --max-lh-h2: 1.2;
  --max-lh-h3: 1.35;
  --max-lh-h4: 1.4;
  --max-lh-body-lg: 1.7;
  --max-lh-body: 1.65;
  --max-lh-sm: 1.5;

  /* ----- Colors ----- */
  --max-color-heading: #0a1559;
  --max-color-body: #4a5568;
  --max-color-muted: #9ca3af;
  --max-color-accent: #e5682d;
  --max-color-up: #2e9e6b;
  --max-color-down: #e24b4a;

  /* ----- Surfaces ----- */
  --max-bg-cream: #fbf9f4;
  --max-border: rgba(10,21,89,.10);
  --max-border-soft: rgba(10,21,89,.06);
}

/* =====================================================
   Site-wide font override → Be Vietnam Pro
   ===================================================== */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, td, th, label {
  font-family: var(--max-font-base) !important;
}

/* =====================================================
   Mobile scale (responsive typography)
   ===================================================== */
@media (max-width: 700px) {
  :root {
    --max-fs-h1: 32px;
    --max-fs-h2: 24px;
    --max-fs-h3: 19px;
    --max-fs-num-lg: 26px;
    --max-fs-num-md: 20px;
  }
}