/* ============================================================
   SAVAFINLAB — DESIGN TOKENS (Style F)
   Nguồn: Charter D71 (22/07/2026), duyệt bởi Anh Quân.
   Mục đích: 1 file token DUY NHẤT dùng chung cho CẢ 2 codebase
   (site mẹ savafinlab.com.vn/Vercel + platform savafinlab-cpa/Netlify,
   D:\cpa-platform-v2) để thống nhất nhận diện thương hiệu — KHÔNG redesign,
   chỉ đổi lớp da (Tầng 1). Tên hiển thị thương hiệu DUY NHẤT trên mọi mặt:
   "CPA Vietnam Learning Intelligence".

   Không tự ý đổi giá trị hex/font trong file này khi thi công — nếu cần
   đổi, quay lại hỏi Claude-Architect / Anh Quân trước (D12: không redesign
   ngoài kế hoạch).
   ============================================================ */

:root {
  /* ---- Màu thương hiệu chính (primary — tím) ---- */
  --sfl-primary-900: #312E81; /* điểm bắt đầu gradient / nền đậm */
  --sfl-primary-700: #4C1D95; /* điểm kết thúc gradient / hover đậm */
  --sfl-primary-gradient: linear-gradient(135deg, var(--sfl-primary-900) 0%, var(--sfl-primary-700) 100%);

  /* ---- Màu nhấn (accent — vàng) ---- */
  --sfl-accent-400: #FBBF24; /* CTA, badge, highlight */
  --sfl-accent-400-hover: #F59E0B; /* hover/active của accent, đậm hơn 1 bậc */

  /* ---- Nền & bề mặt ---- */
  --sfl-surface-0: #FFFFFF;
  --sfl-surface-50: #F9FAFB;
  --sfl-surface-dark: #1E1B2E; /* nền tối, dùng cho footer/terminal-style nếu cần */

  /* ---- Chữ ---- */
  --sfl-text-primary: #111827;
  --sfl-text-secondary: #4B5563;
  --sfl-text-inverse: #FFFFFF;
  --sfl-text-on-accent: #1E1B2E;

  /* ---- Font (1 bộ duy nhất) ---- */
  --sfl-font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: var(--sfl-font-family); /* Áp default sans font cho Tailwind */
  --sfl-font-weight-regular: 400;
  --sfl-font-weight-medium: 500;
  --sfl-font-weight-semibold: 600;
  --sfl-font-weight-bold: 700;

  /* ---- Radius ---- */
  --sfl-radius-sm: 6px;
  --sfl-radius-md: 12px;
  --sfl-radius-lg: 20px;
  --sfl-radius-full: 9999px;

  /* ---- Spacing (thang 4px) ---- */
  --sfl-space-1: 4px;
  --sfl-space-2: 8px;
  --sfl-space-3: 12px;
  --sfl-space-4: 16px;
  --sfl-space-6: 24px;
  --sfl-space-8: 32px;
  --sfl-space-12: 48px;
  --sfl-space-16: 64px;

  /* ---- Shadow ---- */
  --sfl-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --sfl-shadow-md: 0 4px 12px rgba(49, 46, 129, 0.12);
  --sfl-shadow-lg: 0 12px 32px rgba(49, 46, 129, 0.18);
}

/* ---- Class tiện dụng dùng chung ---- */
.sfl-brand-gradient-bg {
  background: var(--sfl-primary-gradient);
  color: var(--sfl-text-inverse);
}

.sfl-cta-accent {
  background: var(--sfl-accent-400);
  color: var(--sfl-text-on-accent);
  border-radius: var(--sfl-radius-full);
  font-weight: var(--sfl-font-weight-semibold);
}

.sfl-cta-accent:hover {
  background: var(--sfl-accent-400-hover);
}