/* ============================================
   VARIABLES.CSS
   Toàn bộ design tokens: màu sắc, font, spacing.
   Đổi giá trị ở đây sẽ áp dụng cho toàn bộ trang.
   ============================================ */

:root {
  /* --- Màu nền (lấy cảm hứng từ bầu trời đêm vùng núi Mường Tè) --- */
  --bg-void: #080b16;
  --bg-void-soft: #0d1224;
  --bg-card: #11162a;
  --bg-card-hover: #161c35;
  --bg-pill: #1a2140;

  /* --- Màu chữ --- */
  --text-primary: #eef1fb;
  --text-secondary: #9aa3c2;
  --text-muted: #6b7394;

  /* --- Màu nhấn --- */
  --accent-mint: #5eead4;      /* nút "Kết nối", điểm nhấn chính */
  --accent-mint-dim: #2dd4bf33;
  --accent-violet: #9d8cf8;    /* điểm nhấn AI / lập trình */
  --accent-violet-dim: #9d8cf833;
  --accent-amber: #f8c85d;     /* điểm nhấn phụ, dùng tiết chế */

  /* --- Viền & bóng --- */
  --border-soft: #232a4a;
  --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --glow-mint: 0 0 24px rgba(94, 234, 212, 0.35);

  /* --- Font chữ ---
     Display/heading: Space Grotesk (hình học, hiện đại — cảm giác kỹ thuật)
     Body: Inter (dễ đọc)
     Mono: JetBrains Mono (dùng cho phần "code" mang tính cá nhân) */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Bo góc & khoảng cách --- */
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-full: 999px;
  --gap-section: 28px;

  /* --- Chuyển động --- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;
}