/* AccTube design tokens — hướng A: nền tối, nhấn xanh điện, tối giản.
   Nạp TRƯỚC mọi CSS theme khác. Mọi màu trong theme phải dùng token, không hardcode hex. */
:root {
  /* nền */
  --at-bg: #0B0F17;          /* nền trang */
  --at-bg-elev: #0F1620;     /* header / footer / sidebar */
  --at-card: #121A26;        /* thẻ, panel */
  --at-card-hover: #16202E;
  --at-border: #1E293B;
  --at-border-strong: #334155;

  /* chữ */
  --at-text: #F1F5F9;
  --at-text-2: #CBD5E1;
  --at-muted: #94A3B8;
  --at-faint: #64748B;

  /* nhấn */
  --at-accent: #22D3EE;      /* cyan 400 */
  --at-accent-strong: #06B6D4;
  --at-accent-soft: rgba(34, 211, 238, 0.12);
  --at-accent-ink: #062A30;  /* chữ trên nền accent */

  /* trạng thái */
  --at-success: #34D399;
  --at-success-soft: rgba(52, 211, 153, 0.14);
  --at-warning: #FBBF24;
  --at-warning-soft: rgba(251, 191, 36, 0.14);
  --at-danger: #F87171;
  --at-danger-soft: rgba(248, 113, 113, 0.14);
  --at-info: #60A5FA;

  /* hình khối */
  --at-radius-sm: 8px;
  --at-radius: 12px;
  --at-radius-lg: 16px;
  --at-radius-xl: 24px;
  --at-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.35);
  --at-ring: 0 0 0 3px rgba(34, 211, 238, 0.35);

  /* chữ */
  --at-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans KR", "Noto Sans SC", sans-serif;
  --at-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* khoảng cách / nhịp */
  --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px;
  --at-space-5: 24px; --at-space-6: 32px; --at-space-7: 48px; --at-space-8: 64px;
  --at-container: 1200px;
  --at-header-h: 64px;
  --at-transition: 160ms ease;

  color-scheme: dark;
}

/* Ánh xạ sang biến Bootstrap 5.3 (web khách đang dùng Bootstrap qua CDN) */
[data-bs-theme="dark"], :root {
  --bs-body-bg: var(--at-bg);
  --bs-body-color: var(--at-text);
  --bs-secondary-color: var(--at-muted);
  --bs-tertiary-color: var(--at-faint);
  --bs-border-color: var(--at-border);
  --bs-primary: var(--at-accent);
  --bs-primary-rgb: 34, 211, 238;
  --bs-success: var(--at-success);
  --bs-success-rgb: 52, 211, 153;
  --bs-warning: var(--at-warning);
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: var(--at-danger);
  --bs-danger-rgb: 248, 113, 113;
  --bs-link-color: var(--at-accent);
  --bs-link-hover-color: var(--at-accent-strong);
  --bs-body-font-family: var(--at-font);
  --bs-border-radius: var(--at-radius-sm);
  --bs-border-radius-lg: var(--at-radius);
  --bs-border-radius-xl: var(--at-radius-lg);
  --bs-card-bg: var(--at-card);
  --bs-tertiary-bg: var(--at-bg-elev);
  --bs-secondary-bg: var(--at-card);
}