/* ==========================================================================
   tokens.css — design tokens landing khóa học AI Agent Founder/CEO (ViAI)
   Gốc: landing-ai-agent-fe-handoff/design-system/tokens.css (ước lượng từ mockup).
   Điều chỉnh có chủ đích:
   - --color-muted đậm hơn (#5B6F91, tương phản 5,2:1 trên nền trắng; bản gốc #657A9C chỉ 4,4:1).
   - --font-sans đặt Be Vietnam Pro trước (tự host, khớp mockup, dấu tiếng Việt đẹp hơn).
   ========================================================================== */
:root {
  /* Thương hiệu */
  --color-brand-navy: #002EA0;
  --color-brand-blue: #0861F8;
  --color-brand-blue-deep: #0037BB;
  --color-brand-orange: #F36B1C;
  --color-brand-orange-dark: #C94E08;   /* chữ/badge nhỏ trên nền trắng cần ≥ 4,5:1 */
  --color-orange-strong: #BF430B;       /* chữ nhãn cam cỡ nhỏ trên nền sáng (≥4,5:1); lấy từ viai-landing */
  --color-brand-orange-text: #E65E0E;   /* chữ lớn nhấn trong tiêu đề: ≥ 3,3:1 trên cả nền trắng lẫn xanh nhạt */
  --color-accent-from: #EB6E0F;         /* gradient chữ nhấn trong tiêu đề */
  --color-accent-to: #DC4B09;
  --color-brand-violet: #8747E8;
  --color-success: #17B968;
  --color-success-dark: #0E8F4F;
  --color-danger: #E5484D;

  /* Chữ & nền */
  --color-text: #173B7A;
  --color-text-strong: #0B2A6B;
  --color-muted: #5B6F91;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F3F9FE;
  --color-surface-ice: #EEF5FD;
  --color-border: #DCE8F8;
  --color-border-strong: #C5D7F2;

  /* Tông nhạt dùng cho ô icon / nền thẻ */
  --tint-blue: #E6F0FF;
  --tint-violet: #F0E8FD;
  --tint-orange: #FFF0E4;
  --tint-orange-soft: #FFF6EE;
  --tint-green: #E3F6EC;
  --tint-red: #FDECEC;

  /* Gradient */
  --gradient-heading: linear-gradient(90deg, #002EA0 0%, #0861F8 56%, #F36B1C 100%);
  --gradient-footer-cta: linear-gradient(110deg, #0861F8 0%, #0037BB 100%);
  --gradient-trial: linear-gradient(105deg, #0A63FA 0%, #0850E2 60%, #0A47CF 100%);
  --gradient-roadmap: linear-gradient(90deg, #0861F8 0%, #8747E8 62%, #F36B1C 100%);

  /* Font */
  --font-sans: "Be Vietnam Pro", "Inter", Arial, sans-serif;

  /* Hình khối */
  --radius-card: 16px;
  --radius-button: 9px;
  --radius-input: 10px;
  --shadow-card: 0 6px 24px rgba(16, 52, 124, 0.08);
  --shadow-card-hover: 0 14px 36px rgba(16, 52, 124, 0.14);
  --shadow-float: 0 20px 50px rgba(10, 40, 110, 0.18);

  /* Chuyển động (js/motion.js đọc --dur-reveal và --stagger; chỉnh mạnh/nhẹ tại đây) */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --reveal-dist: 28px;                  /* quãng trượt vào */
  --dur-reveal: 700ms;                  /* thời lượng xuất hiện */
  --stagger: 70ms;                      /* độ trễ giữa các phần tử cùng nhóm */

  /* Layout */
  --content-max-width: 1200px;
  --gutter: 24px;
  --section-space: 72px;
  --header-h: 72px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-space: 48px;
    --header-h: 64px;
  }
}