/* Design System "Kỷ Cương & Khát Vọng" — sinh từ tokens.json */
:root {
  --canvas: #f4f7fb;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;
  --ink-strong: #0f172a;
  --ink: #1e293b;
  --ink-secondary: #475569;
  --ink-muted: #64748b;
  --primary: #1e40af;
  --primary-hover: #2563eb;
  --on-primary: #ffffff;
  --primary-soft: #eff6ff;
  --primary-soft-border: #bfdbfe;
  --link: #2563eb;
  --focus-ring: #2563eb;
  --nav-bg: #0d1e3a;
  --nav-bg-deep: #0a1830;
  --nav-hover: #162d53;
  --nav-border: #1a335c;
  --nav-active: #2563eb;
  --nav-ink: #cbd5e1;
  --nav-ink-strong: #ffffff;
  --nav-ink-muted: #94a3b8;
  --nav-accent: #38bdf8;
  --gold: #f59e0b;
  --silver: #94a3b8;
  --bronze: #d97706;
  --on-medal: #0f172a;
  --gold-soft: #fffbeb;
  --gold-border: #fde68a;
  --gold-ink: #b45309;
  --warning-soft: #fef3c7;
  --warning-ink: #b45309;
  --warning-border: #fde68a;
  --info-soft: #e0f2fe;
  --info-ink: #0369a1;
  --success-soft: #d1fae5;
  --success-ink: #047857;
  --danger-soft: #fee2e2;
  --danger-ink: #b91c1c;
  --danger-border: #fecaca;
  --danger: #ef4444;
  --success: #10b981;
  --indigo: #4f46e5;
  --violet: #7c3aed;
  --tint-blue: #eff6ff;
  --tint-red: #fff1f2;
  --tint-green: #ecfdf5;
  --tint-amber: #fffbeb;
  --tint-indigo: #eef2ff;
  --banner-from: #e0f2fe;
  --banner-to: #dbeafe;
  --banner-border: #bfdbfe;
  --banner-ink: #172554;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --sidebar-w: 324px;
  --header-h: 64px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --row-min: 48px;
  --icon-tile: 40px;
  --shadow-card: 0 1px 3px 0 rgba(11, 25, 44, 0.04), 0 1px 2px -1px rgba(11, 25, 44, 0.04);
  --shadow-raised: 0 4px 10px -2px rgba(11, 25, 44, 0.08), 0 2px 4px -2px rgba(11, 25, 44, 0.05);
  --shadow-pop: 0 10px 15px -3px rgba(11, 25, 44, 0.08), 0 4px 6px -4px rgba(11, 25, 44, 0.04);
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  --canvas: #0a1322;
  --surface: #111c2e;
  --surface-subtle: #16233a;
  --surface-muted: #1c2b45;
  --border: #26385a;
  --border-subtle: #1c2b45;
  --border-strong: #3a5078;
  --ink-strong: #f8fafc;
  --ink: #e2e8f0;
  --ink-secondary: #cbd5e1;
  --ink-muted: #94a3b8;
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --on-primary: #0b192c;
  --primary-soft: #172a4d;
  --primary-soft-border: #2c4a80;
  --link: #93c5fd;
  --focus-ring: #93c5fd;
  --nav-bg: #08111f;
  --nav-bg-deep: #060d18;
  --nav-hover: #132744;
  --nav-border: #1a2c4a;
  --nav-active: #2563eb;
  --nav-ink: #cbd5e1;
  --nav-ink-strong: #ffffff;
  --nav-ink-muted: #94a3b8;
  --nav-accent: #38bdf8;
  --gold: #fbbf24;
  --silver: #94a3b8;
  --bronze: #f59e0b;
  --on-medal: #0f172a;
  --gold-soft: #2f2206;
  --gold-border: #5c4310;
  --gold-ink: #fcd34d;
  --warning-soft: #3a2a0a;
  --warning-ink: #fcd34d;
  --warning-border: #5c4310;
  --info-soft: #0c2a44;
  --info-ink: #7dd3fc;
  --success-soft: #0b3328;
  --success-ink: #6ee7b7;
  --danger-soft: #3d1418;
  --danger-ink: #fca5a5;
  --danger-border: #6b2128;
  --danger: #f87171;
  --success: #34d399;
  --indigo: #a5b4fc;
  --violet: #c4b5fd;
  --tint-blue: #172a4d;
  --tint-red: #3d1418;
  --tint-green: #0b3328;
  --tint-amber: #2f2206;
  --tint-indigo: #1e1b4b;
  --banner-from: #0f2140;
  --banner-to: #14295a;
  --banner-border: #24427a;
  --banner-ink: #dbeafe;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 10px 20px -4px rgba(0, 0, 0, 0.55);
}