/* ============================================================
   TPA — DESIGN TOKENS
   Chỉnh tất cả màu sắc, font, spacing tại đây.
   ============================================================ */

:root {
  /* ── Brand ── */
  --brand-700: #0F3D6E;
  --brand-500: #1E6FB8;
  --brand-100: #D9EAFB;

  /* ── Accent (CTA chính) ── */
  --accent-500: #F26430;
  --accent-600: #D8521F;
  --accent-100: #FDE9DF;

  /* ── Gold (premium/badge) ── */
  --gold-500: #E2A93B;
  --gold-100: #FDF3DC;

  /* ── Nền ── */
  --bg: #FFFFFF;
  --bg-soft: #F4F8FC;
  --bg-warm: #FFF6EE;

  /* ── Chữ ── */
  --ink-900: #1B2733;
  --ink-700: #2D3E4F;
  --slate-500: #5B6675;
  --slate-300: #98A4B0;

  /* ── Viền ── */
  --line: #E6ECF2;

  /* ── Radius ── */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(27, 39, 51, 0.08);
  --shadow-md: 0 12px 32px rgba(27, 39, 51, 0.12);
  --shadow-lg: 0 24px 48px rgba(27, 39, 51, 0.16);

  /* ── Spacing base 8px ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Section padding ── */
  --section-py: clamp(4rem, 8vw, 7rem);

  /* ── Container ── */
  --container-max: 1200px;
  --container-gutter: 24px;

  /* ── Typography ── */
  --font-body: 'Be Vietnam Pro', sans-serif;

  /* ── Transition ── */
  --ease: 0.25s ease;
}