/* Token Aurora: màu, bo góc, bóng, chữ. Ánh xạ sang --bs-* để view Bootstrap cũ tự đổi theo. */
:root,
[data-bs-theme="light"] {
  --lt-bg: #ffffff;
  --lt-bg-soft: #f6f9ff;
  --lt-surface: rgba(255, 255, 255, .86);
  --lt-ink: #0f172a;
  --lt-ink-2: #475569;
  --lt-ink-3: #94a3b8;
  --lt-line: #e2e8f0;
  --lt-line-blue: #dbeafe;
  --lt-ocean: #1d4ed8;
  --lt-sky: #0ea5e9;
  --lt-ocean-50: #eff6ff;
  --lt-fit: #047857;
  --lt-fit-soft: #ecfdf5;
  --lt-bad: #b91c1c;
  --lt-warn: #b45309;
  --lt-ocean-100: #e0ecff;
  --lt-grad: linear-gradient(90deg, var(--lt-ocean), var(--lt-sky));
  /* Nền có chữ/icon trắng: hai đầu đều đạt ≥ 4.5:1 với trắng, dùng chung cho cả dark mode. */
  --lt-grad-strong: linear-gradient(90deg, #1d4ed8, #0369a1);
  /* Chữ gradient trên nền sáng. */
  --lt-grad-text: linear-gradient(90deg, #1d4ed8, #0369a1);
  --lt-r-sm: 12px;
  --lt-r-md: 18px;
  --lt-r-lg: 24px;
  --lt-shadow: 0 4px 18px rgba(15, 23, 42, .05);
  --lt-shadow-blue: 0 14px 40px rgba(30, 64, 175, .16);
  --lt-ease: cubic-bezier(.2, .8, .2, 1);
  /* Phông kiểu iOS cho TOÀN BỘ chữ: máy Apple dùng SF Pro có sẵn (không tải gì); máy khác dùng Inter tự phục vụ.
     --lt-mono (tiêu đề nhỏ, thông số, giá) giữ tên cũ nhưng cùng phông iOS; chỉ code thật (<code>, <pre>, khối code bài viết) dùng --lt-code. */
  --lt-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --lt-mono: var(--lt-font);
  --lt-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --lt-aurora-opacity: .55;

  --bs-body-font-family: var(--lt-font);
  --bs-font-monospace: var(--lt-code);
  --bs-body-color: var(--lt-ink);
  --bs-body-bg: var(--lt-bg-soft);
  --bs-border-color: var(--lt-line);
  --bs-primary: #1d4ed8;
  --bs-primary-rgb: 29, 78, 216;
  --bs-primary-bg-subtle: #eff6ff;
  --bs-primary-border-subtle: #bfdbfe;
  --bs-primary-text-emphasis: #1e40af;
  --bs-link-color: #1d4ed8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1e40af;
  --bs-link-hover-color-rgb: 30, 64, 175;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1.125rem;
  --bs-border-radius-xl: 1.5rem;
}

[data-bs-theme="dark"] {
  --lt-fit: #34d399;
  --lt-fit-soft: rgba(52, 211, 153, .12);
  --lt-bad: #fca5a5;
  --lt-warn: #fbbf24;
  --lt-bg: #0b1220;
  --lt-bg-soft: #0b1220;
  --lt-surface: rgba(17, 26, 46, .86);
  --lt-ink: #e2e8f0;
  --lt-ink-2: #a5b4c8;
  --lt-ink-3: #64748b;
  --lt-line: #1f2a44;
  --lt-line-blue: #1e3a8a;
  --lt-ocean: #60a5fa;
  --lt-sky: #38bdf8;
  --lt-ocean-50: rgba(59, 130, 246, .12);
  --lt-ocean-100: rgba(59, 130, 246, .2);
  --lt-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  --lt-shadow-blue: 0 14px 40px rgba(0, 0, 0, .45);
  --lt-aurora-opacity: .22;
  --lt-grad-text: linear-gradient(90deg, #60a5fa, #38bdf8);

  --bs-body-color: var(--lt-ink);
  --bs-body-bg: var(--lt-bg);
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: rgba(226, 232, 240, .7);
  --bs-secondary-bg: #16213a;
  --bs-tertiary-bg: #111a2e;
  --bs-border-color: var(--lt-line);
  --bs-primary: #3b82f6;
  --bs-primary-rgb: 59, 130, 246;
  --bs-link-color: #60a5fa;
  --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color: #93c5fd;
  --bs-link-hover-color-rgb: 147, 197, 253;
}