/* ==========================================================================
   BaseAI Design Tokens
   --------------------------------------------------------------------------
   Nguồn duy nhất cho màu, font, cỡ chữ, spacing, bo góc, bóng đổ.
   Load TRƯỚC style.css (xem Views/Shared/_Head.cshtml).
   Muốn đổi giao diện toàn site -> sửa ở đây, không hardcode giá trị trong style.css.
   ========================================================================== */

:root {
  /* ---------- Color: brand ---------- */
  --color-primary: #003cff;
  --color-primary-light: #00b7ff;
  --color-accent: #0d7cff;            /* chữ nhấn (tag, logo "AI") */
  --color-secondary: #2563eb;         /* xanh phụ: lang switcher, modal */
  --color-secondary-light: #0ea5e9;

  --gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  --gradient-hero: linear-gradient(135deg, var(--color-navy-600), #00bfff);

  /* ---------- Color: navy / text ---------- */
  --color-navy: #08153a;              /* chữ chính + nền section tối */
  --color-navy-700: #0d2159;
  --color-navy-600: #0a1f6f;

  --color-text: var(--color-navy);
  --color-text-muted: #687794;
  --color-text-subtle: #7c88a5;
  --color-text-on-dark: #c9d2f0;

  /* ---------- Color: surface / border ---------- */
  --color-white: #fff;
  --color-bg: #f5f8ff;                /* nền trang */
  --color-bg-tint: #eef4ff;           /* nền section nhấn (tuyển dụng) */
  --color-border: #d6def5;
  --color-border-soft: #e4ebf7;

  /* ---------- Color: slate (UI trung tính) ---------- */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #111827;

  /* ---------- Color: status ---------- */
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-warning: #92700a;
  --color-warning-bg: #fff3cd;
  --color-danger: #b71c1c;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f5c6cb;
  --color-info: var(--color-secondary);
  --color-info-bg: #dbeafe;

  /* ---------- Typography ---------- */
  /* Font hệ thống: không tốn request, hỗ trợ đủ tiếng Việt. Đổi font web -> chỉ sửa dòng này. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 64px;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ---------- Spacing (thang 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .08);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .05);
  --shadow-primary: 0 4px 20px rgba(0, 60, 255, .35);
  --focus-ring: 0 0 0 3px rgba(0, 60, 255, .35);

  /* ---------- Layout ---------- */
  /* Chiều cao header sticky = padding 12*2 + logo 72. Mobile (<=768px) ghi đè thành 80px trong style.css. */
  --header-h: 96px;

  /* ---------- Motion ---------- */
  --transition-fast: .2s ease;
}