/* =============================================================
   LMS Design System — Design Tokens
   Màu sắc, spacing, typography theo nguyen-tac-thiet-ke-lms.md
   ============================================================= */

:root {
  /* ── Font ── */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ── Typography (Thang cỡ chữ) ── */
  --fs-heading-page: 24px;
  --fw-heading-page: 600;
  --fs-heading-section: 13.5px;
  --fw-heading-section: 600;
  --fs-card-title: 14px;
  --fw-card-title: 600;
  --fs-body: 13.5px;
  --fw-body: 400;
  --fs-label: 12px;
  --fw-label: 600;
  --ls-label: 0px;
  --tt-label: none;
  --fs-caption: 12px;
  --fw-caption: 400;
  --fs-button: 14.5px;
  --fw-button: 600;

  /* ── Màu chủ đạo (Primary - Royal Blue) ── */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-primary-soft: rgba(37, 99, 235, 0.10);
  --color-primary-outline: rgba(37, 99, 235, 0.20);

  /* ── Badge High-Contrast Formula (Nền cực nhạt + Chữ đậm) ── */
  --badge-blue-bg: #EFF6FF;
  --badge-blue-fg: #1D4ED8;
  --badge-green-bg: #F0FDF4;
  --badge-green-fg: #15803D;
  --badge-purple-bg: #F3E8FF;
  --badge-purple-fg: #7E22CE;
  --badge-yellow-bg: #FFFBEB;
  --badge-yellow-fg: #B45309;

  /* ── Màu trạng thái hệ thống ── */
  --color-success: #15803D;
  --color-success-soft: rgba(21, 128, 61, 0.10);
  --color-warning: #B45309;
  --color-warning-soft: rgba(180, 83, 9, 0.10);
  --color-danger: #DC2626;
  --color-danger-soft: rgba(220, 38, 38, 0.10);
  --color-info: #7E22CE;
  --color-info-soft: rgba(126, 34, 206, 0.10);

  /* ── Màu trung tính & nền ── */
  --color-page: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FAFAFC;
  --color-surface-soft: #F1F5F9;
  --color-surface-subtle: #E2E8F0;

  /* ── Chữ (WCAG AA Compliant) ── */
  --color-text: #111827;
  --color-text-secondary: #475467;
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;
  --color-ink: #111827;

  /* ── Sidebar ── */
  --color-sidebar: #FFFFFF;
  --color-sidebar-border: #E5E7EB;
  --color-sidebar-text: #374151;
  --color-sidebar-text-muted: #6B7280;
  --color-sidebar-active: #EFF6FF;
  --color-sidebar-hover: #F3F4F6;

  /* ── Viền ── */
  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-soft: #EEF2F7;
  --overlay: rgba(17, 18, 20, 0.42);

  /* ── Spacing (thang 4px) ── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Bo góc (3 mức theo nguyên tắc) ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Motion ── */
  --motion-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Layout ── */
  --sidebar-width: 272px;
  --topbar-height: 68px;
  --content-max-width: 1600px;

  /* ── Aliases (backward compat) ── */
  --primary: var(--color-primary);
  --primary-light: var(--color-primary-light);
  --primary-dark: var(--color-primary-hover);
  --accent: var(--color-primary);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --border: var(--border-color);
  --card-bg: var(--color-surface);
  --bg-secondary: var(--color-surface);
  --input-bg: var(--color-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --sidebar-hover: var(--color-sidebar-hover);
  --muted: var(--color-text-muted);
}

/* ── Dark mode ── */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #5BA3D4;
  --color-primary-hover: #4A90C2;
  --color-primary-light: rgba(91, 163, 212, 0.15);
  --color-primary-soft: rgba(91, 163, 212, 0.15);
  --color-primary-outline: rgba(91, 163, 212, 0.25);

  --badge-blue-bg: rgba(44, 109, 164, 0.25);
  --badge-blue-fg: #7EC2ED;
  --badge-green-bg: rgba(31, 122, 92, 0.22);
  --badge-green-fg: #5DD4A8;
  --badge-purple-bg: rgba(75, 63, 145, 0.22);
  --badge-purple-fg: #A99DE6;
  --badge-yellow-bg: rgba(169, 122, 27, 0.22);
  --badge-yellow-fg: #F0C96A;

  --color-page: #0F1117;
  --color-surface: #181C25;
  --color-surface-elevated: #1E2330;
  --color-surface-soft: #232838;
  --color-surface-subtle: #2A3044;

  --color-text: #E8EDF5;
  --color-text-secondary: #A0ABBE;
  --color-text-muted: #6B7A8C;
  --color-text-inverse: #0F1117;

  --color-sidebar: #181C25;
  --color-sidebar-border: rgba(255, 255, 255, 0.07);
  --color-sidebar-text: rgba(232, 237, 245, 0.82);
  --color-sidebar-text-muted: rgba(160, 171, 190, 0.6);
  --color-sidebar-active: rgba(91, 163, 212, 0.18);
  --color-sidebar-hover: rgba(255, 255, 255, 0.05);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.04);
  --overlay: rgba(0, 0, 0, 0.58);

  --color-success-soft: rgba(27, 122, 84, 0.18);
  --color-warning-soft: rgba(194, 93, 10, 0.18);
  --color-danger-soft: rgba(196, 60, 47, 0.18);
  --color-info-soft: rgba(75, 63, 145, 0.18);
}