/* ============================================================
   AIT ALLIANCE — THEME TOKENS (file duy nhất định nghĩa MÀU)
   ------------------------------------------------------------
   CÁCH ĐỔI THEME TOÀN SITE:
   1) Mở assets/js/theme.js và sửa DEFAULT = "dark" hoặc "light".
   2) Xem thử nhanh không cần sửa code: thêm ?theme=light
      (hoặc ?theme=dark) vào URL bất kỳ, giữ nguyên trong phiên xem.

   CÁCH THÊM THEME MỚI:
   - Copy khối [data-theme="light"] bên dưới, đổi tên
     [data-theme="ten-moi"] và chỉnh giá trị token.
   - Mọi màu của style.css và các trang đều chảy từ token ở đây,
     không cần sửa chỗ nào khác.
   ============================================================ */

/* ---------- THEME: DARK (mặc định — "Deep Space") ---------- */
:root {
  color-scheme: dark;

  /* Nền & bề mặt */
  --bg:           #070b18;
  --bg-2:         #0b1124;
  --surface:      #0f1730;
  --surface-2:    #141d3b;
  --line:         rgba(255,255,255,.08);
  --line-strong:  rgba(255,255,255,.14);

  /* Chữ */
  --ink:          #eef2ff;
  --ink-soft:     #c2cae6;
  --ink-muted:    #8b95bd;

  /* Màu thương hiệu */
  --brand:        #4f7cff;   /* electric blue */
  --brand-2:      #00d2c6;   /* cyan/teal */
  --brand-3:      #9b6bff;   /* violet */
  --accent:       #ffb020;   /* gold accent */
  --danger:       #ff7b7b;

  /* Vàng gold theo logo AIT (logo-icon.png) — dùng cho animation ∞ (404, /cam-on) */
  --ait-gold:      #d9b477;
  --ait-gold-hi:   #f8e6b1;
  --ait-gold-deep: #a97e46;

  /* Chữ đặt TRÊN nền gradient thương hiệu (nút, logo, avatar) */
  --on-brand:     #061025;

  /* Sector colors */
  --sector-re:    #4f7cff;
  --sector-health:#00d2c6;
  --sector-edu:   #9b6bff;

  --grad-brand: linear-gradient(120deg, #4f7cff 0%, #00d2c6 60%, #9b6bff 100%);
  --grad-soft:  linear-gradient(135deg, rgba(79,124,255,.16), rgba(0,210,198,.10));

  /* Ánh sáng nền trang (body::before) */
  --amb-1: color-mix(in srgb, var(--brand)   22%, transparent);
  --amb-2: color-mix(in srgb, var(--brand-3) 18%, transparent);
  --amb-3: color-mix(in srgb, var(--brand-2) 12%, transparent);

  /* Đổ bóng */
  --shadow:    0 24px 60px -22px rgba(0,0,0,.7);
  --shadow-sm: 0 10px 30px -16px rgba(0,0,0,.6);

  /* Thanh cuộn + bôi đen chọn chữ */
  --scroll-hover: #2a3868;
  --sel-bg:  color-mix(in srgb, var(--brand) 40%, transparent);
  --sel-ink: #fff;

  /* Code card (giữ tối ở MỌI theme cho sang) */
  --code-bg:      #0a1124;
  --code-ink:     #c9d4f5;
  --code-comment: #5b6789;

  /* Kích thước & font (không đổi theo theme) */
  --radius:   18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "Space Grotesk", var(--ff-sans);
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --nav-h: 74px;
}

/* ---------- THEME: LIGHT ("Lumen" — sáng, sang, vẫn chất AI) ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg:           #f6f8fd;
  --bg-2:         #edf1fb;
  --surface:      #ffffff;
  --surface-2:    #f1f4fc;
  --line:         rgba(15,26,64,.09);
  --line-strong:  rgba(15,26,64,.16);

  --ink:          #0e1534;
  --ink-soft:     #3a4570;
  --ink-muted:    #67718f;

  --brand:        #3b5df0;
  --brand-2:      #00a396;
  --brand-3:      #7a4df5;
  --accent:       #d98a00;
  --danger:       #d64545;

  /* Vàng gold logo — bản đậm hơn để nổi trên nền sáng */
  --ait-gold:      #b08a4a;
  --ait-gold-hi:   #d6b577;
  --ait-gold-deep: #775633;

  --on-brand:     #ffffff;

  --sector-re:    #3b5df0;
  --sector-health:#00a396;
  --sector-edu:   #7a4df5;

  --grad-brand: linear-gradient(120deg, #3b5df0 0%, #00b3a4 60%, #8250f7 100%);
  --grad-soft:  linear-gradient(135deg, rgba(59,93,240,.09), rgba(0,179,164,.07));

  --amb-1: color-mix(in srgb, var(--brand)   10%, transparent);
  --amb-2: color-mix(in srgb, var(--brand-3)  8%, transparent);
  --amb-3: color-mix(in srgb, var(--brand-2)  7%, transparent);

  --shadow:    0 24px 60px -24px rgba(30,48,110,.28);
  --shadow-sm: 0 10px 30px -16px rgba(30,48,110,.18);

  --scroll-hover: #c3cde6;
  --sel-bg:  color-mix(in srgb, var(--brand) 22%, transparent);
  --sel-ink: var(--ink);
}