/* ==========================================================================
   variables.css - Design tokens
   Suy ra từ mockup home.png (render ở CSS viewport 1536px, ảnh cấp ở 1024px).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- Bố cục */
  --container-max: 1320px;          /* chiều rộng nội dung toàn site */
  --container-gutter: 32px;         /* lề ngang desktop */
  --container-gutter-md: 24px;      /* tablet */
  --container-gutter-sm: 18px;      /* mobile */
  --reading-max: 760px;             /* cột đọc cho bài viết dài */

  /* ------------------------------------------------------------ Màu */
  --color-navy: #001549;            /* navy thương hiệu (logo, tiêu đề) */
  --color-navy-soft: #16266b;
  --color-ink: #07233a;             /* navy đậm cho dải CTA + footer */
  --color-ink-2: #0d3557;           /* điểm sáng gradient trên nền navy */

  --color-heading: var(--color-navy);
  --color-text: #263c7c;            /* body text xanh navy nhạt */
  --color-text-muted: #4b6093;
  --color-text-soft: #6b7da8;

  --color-gold: #e0aa52;            /* nền button chính */
  --color-gold-light: #f2d089;
  --color-gold-dark: #c2882c;
  --color-gold-ink: #b26a0d;        /* dòng tiêu đề màu vàng */
  --color-accent: #c97a12;          /* eyebrow / nhãn nhỏ */

  --color-youtube: #ff0000;

  --color-bg: #ffffff;
  --color-bg-alt: #faf9f6;          /* dải nền kem xen kẽ */
  --color-surface: #ffffff;

  --color-border: #e7e3dc;
  --color-border-soft: #f0ece5;
  --color-border-dark: rgba(255, 255, 255, 0.14);

  --color-on-dark: #ffffff;
  --color-on-dark-muted: #c3d2e2;

  /* ------------------------------------------------------ Typography */
  --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --fs-h1: 44px;
  --fs-h2: 37px;
  --fs-h3: 21px;
  --fs-h4: 17px;
  --fs-lead: 17px;
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-xs: 13.5px;
  --fs-eyebrow: 17px;

  --lh-display: 1.16;
  --lh-heading: 1.18;
  --lh-body: 1.62;
  --lh-tight: 1.45;

  /* ---------------------------------------------------------- Nhịp */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ------------------------------------------------------- Bo & bóng */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 21, 73, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 21, 73, 0.07), 0 1px 2px rgba(0, 21, 73, 0.04);
  --shadow-md: 0 6px 20px rgba(0, 21, 73, 0.09), 0 2px 4px rgba(0, 21, 73, 0.05);
  --shadow-gold: 0 2px 6px rgba(178, 106, 13, 0.24);

  /* ------------------------------------------------------- Chuyển động */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.18s;

  /* --------------------------------------------- Chiều cao cố định */
  --header-height: 58px;
}