/* ==========================================================================
   Anh Ngữ Vòm Sáng — tokens.css
   Lớp tuỳ biến thương hiệu. Đổi giá trị ở đây là đổi toàn bộ giao diện.
   Được nạp TRƯỚC khối <style> trong index.html.
   ========================================================================== */

:root {
  /* --- Bảng màu lõi ------------------------------------------------------ */
  --bg:            #F9FAFB;   /* nền trang */
  --ink:           #101B2E;   /* chữ chính */
  --ink-soft:      #4C5768;   /* chữ phụ — đạt AA trên nền sáng */
  --card:          #FFFFFE;   /* nền thẻ */
  --line:          #DDE3EC;   /* đường kẻ mảnh, viền bảng */

  /* --- Màu nhấn ---------------------------------------------------------- */
  --accent:        #1E3A6E;   /* xanh navy — nút chính, tiêu đề bảng, số liệu */
  --accent-deep:   #162C55;   /* navy đậm — hover */
  --accent-soft:   #E8EEF8;   /* navy rất nhạt — nền chip, nền hàng bảng */
  --sand:          #E9B949;   /* vàng cát — CHỈ dùng cho chip "Sắp khai giảng" */
  --sand-soft:     #FDF4DF;   /* nền chip vàng */
  --ok:            #1F6B4A;   /* xanh lá — dấu tích trong bảng so sánh */

  /* --- Chữ --------------------------------------------------------------- */
  --font-display:  'Be Vietnam Pro', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --size-body:     17px;
  --lh-body:       1.6;       /* ≥1.5 — dấu thanh tiếng Việt cần chỗ thở */
  --lh-display:    1.12;      /* ≥1.05 — tránh cắt Ầ / ỹ / ọ */
  --track-display: -.02em;
  --track-mono:    .11em;

  /* --- Hình khối --------------------------------------------------------- */
  --r-card:        12px;      /* thẻ, ảnh */
  --r-pill:        999px;     /* chip, nút */
  --r-sm:          8px;       /* ô nhập liệu */
  --border-w:      1px;
  --shadow-card:   0 1px 2px rgba(16,27,46,.06), 0 8px 24px rgba(16,27,46,.06);

  /* --- Nhịp khoảng cách -------------------------------------------------- */
  --section-y:     clamp(2.75rem, 5.5vw, 4rem);
  --gutter:        clamp(1.125rem, 4vw, 3.5rem);
  --maxw:          1200px;

  /* --- Chuyển động ------------------------------------------------------- */
  --ease:          cubic-bezier(.16, 1, .3, 1);
}