/* =========================================================================
   VINHMATH — DESIGN TOKENS
   - Chế độ Sáng (Light Mode): Phong cách "Liquid Glass" của Apple
     (Kính mờ phủ sương, mờ đục nhẹ, viền mảnh sắc sảo, nền gradient chuyển màu mượt).
   - Chế độ Tối (Dark Mode): Phong cách "Neon Terminal / Blackbox" viễn tưởng
     (Kính mờ tối, viền phát sáng nhẹ, đồ họa neon cyan/coral rực rỡ).
   ========================================================================= */

:root {
  /* --- PHÔNG CHỮ --- */
  --font-sans: "Be Vietnam Pro", -apple-system, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-title: "Lora", Georgia, serif;
  --font-mono: "Fira Code", monospace;

  --fs-h1: 2.5rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.35rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8rem;

  /* --- CẤU TRÚC: BO GÓC & BÓNG --- */
  --r-sm: 6px; /* Hơi vuông hơn đậm chất học thuật phương Tây */
  --r-md: 10px;
  --r-lg: 16px;
  
  /* --- ĐỘ TRONG SUỐT VÀ BLUR (Liquid Glass Controls) --- */
  --glass-opacity: 0.15;
  --glass-blur-radius: 16px;
  
  /* --- CHẾ ĐỘ SÁNG (LIGHT MODE) - CỔ ĐIỂN PHƯƠNG TÂY ĐỒNG BỘ TÀI LIỆU --- */
  --bg: #faf8f5; /* Màu giấy da/ivory ấm áp cổ điển */
  --bg-gradient: linear-gradient(135deg, #faf8f5 0%, #f4f6fa 100%);
  --bg-rgb: 250, 248, 245;
  --surface-rgb: 255, 255, 255;
  --surface-2-rgb: 241, 245, 249;
  
  --surface: rgba(255, 255, 255, 0.85); /* Kính mờ tráng gương */
  --surface-2: rgba(15, 23, 42, 0.05); /* Hover kính nhạt xám tối */
  --surface-solid: #ffffff;
  
  --line: rgba(15, 23, 42, 0.12); /* Viền kính mờ */
  --line-2: rgba(194, 125, 0, 0.3); /* Viền màu brandGold mờ */
  --grid-line: rgba(15, 23, 42, 0.04); /* Đường kẻ ô toán học xám mờ */
  
  --ink: #1a1a1a; /* brandDark - Đen xám chữ chính */
  --ink-2: #111111; /* brandBlack - Đen đậm cho tiêu đề */
  --ink-3: #555555; /* brandGray - Xám ghi phụ */
  
  --accent: #7a4d00; /* brandGold - Vàng hổ phách tối đậm, độ tương phản rất cao, cực kỳ dễ đọc trên nền sáng */
  --accent-hover: #613d00;
  --accent-soft: rgba(122, 77, 0, 0.08);
  --accent-gradient: linear-gradient(135deg, #9e6100 0%, #613d00 100%);
  
  --ok: #1a7556;
  --ok-soft: rgba(26, 117, 86, 0.1);
  --warn: #b87d14;
  --warn-soft: rgba(184, 125, 20, 0.1);
  --err: #9e2a2b;
  --err-soft: rgba(158, 42, 43, 0.1);
  
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
  --glass-blur: blur(var(--glass-blur-radius));
  --glass-border: 1px solid rgba(194, 125, 0, 0.2); /* Viền vàng gold mảnh bao quanh card */

  /* Thiết lập riêng biệt cho Topbar để xám đen dạng Kính mờ trong suốt */
  --topbar-bg: rgba(250, 248, 245, 0.7);
  --topbar-border: 1px solid rgba(15, 23, 42, 0.08);
  --topbar-link: var(--ink-2);
  --topbar-link-hover: var(--accent);
  --topbar-link-active: var(--accent);
  --topbar-text: var(--ink-2);
  --topbar-text-muted: var(--ink-3);
  --topbar-btn-bg: rgba(15, 23, 42, 0.04);
  --topbar-btn-border: 1px solid rgba(15, 23, 42, 0.12);
  --topbar-btn-text: var(--ink-2);
  --topbar-btn-hover-bg: rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] {
  /* --- CHẾ ĐỘ TỐI (DARK MODE) - HOÀNG GIA HUYỀN BÍ --- */
  --glass-opacity: 0.25;
  --glass-blur-radius: 16px;

  --bg: #000000; /* Đen tuyền tuyệt đối */
  --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
  --bg-rgb: 0, 0, 0;
  --surface-rgb: 20, 20, 20;
  --surface-2-rgb: 30, 30, 30;
  
  --surface: rgba(20, 20, 20, 0.7); /* Kính mờ đen tối */
  --surface-2: rgba(30, 30, 30, 0.85); /* Hover kính tối */
  --surface-solid: #121212;
  
  --line: rgba(255, 255, 255, 0.07); /* Viền kính mờ */
  --line-2: rgba(194, 125, 0, 0.25); /* Viền vàng gold phát sáng mờ */
  --grid-line: rgba(255, 255, 255, 0.02); /* Đường kẻ ô toán học tối */
  
  --ink: #f1f5f9; /* Slate 100 */
  --ink-2: #cbd5e1; /* Slate 300 */
  --ink-3: #64748b; /* Slate 500 */
  
  --accent: #dfbc5e; /* Vàng gold sáng rực rỡ */
  --accent-hover: #f3d483;
  --accent-soft: rgba(223, 188, 94, 0.15);
  --accent-gradient: linear-gradient(135deg, #f3d483 0%, #a66b00 100%);
  
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.15);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.15);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, 0.15);
  
  --shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
  --glass-blur: blur(var(--glass-blur-radius));
  --glass-border: 1px solid rgba(194, 125, 0, 0.15);

  /* Topbar ở chế độ Tối */
  --topbar-bg: rgba(15, 15, 15, 0.75);
  --topbar-border: 1px solid rgba(197, 155, 39, 0.2);
  --topbar-link: #cbd5e1;
  --topbar-link-hover: #dfbc5e;
  --topbar-link-active: #dfbc5e;
  --topbar-text: #f1f5f9;
  --topbar-text-muted: #64748b;
  --topbar-btn-bg: rgba(255, 255, 255, 0.08);
  --topbar-btn-border: 1px solid rgba(255, 255, 255, 0.15);
  --topbar-btn-text: #cbd5e1;
  --topbar-btn-hover-bg: rgba(255, 255, 255, 0.15);
}

.brand-vinh {
  color: var(--accent) !important;
}
.brand-math {
  color: var(--topbar-text, #ffffff) !important;
}