/* ========================================================================== DESIGN TOKENS — Nguồn gốc duy nhất của toàn bộ Design System Load file này TRƯỚC mọi CSS khác ở mọi trang HTML ========================================================================== */ :root { /* ── Brand ──────────────────────────────────────────── */ --primary: #8b0b0b; --primary-dark: #700909; --primary-light: #fff1f1; --primary-50: #fff5f5; /* Hover/active tint */ --primary-100: #ffe4e4; /* Selected state */ --primary-200: #fecaca; /* Border accent */ /* ── Navy (header, accents) ─────────────────────────── */ --navy: #1e3a5f; --navy-dark: #162d4a; /* ── Slate scale (thay thế gray hardcoded) ──────────── */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ── Neutrals ───────────────────────────────────────── */ --bg-body: var(--slate-100); /* #f1f5f9 */ --bg-card: #ffffff; --bg-sub: var(--slate-50); /* #f8fafc */ --border: var(--slate-200); /* #e2e8f0 */ --text: var(--slate-800); /* #1e293b */ --muted: var(--slate-500); /* #64748b */ /* ── Semantic colors ────────────────────────────────── */ --success: #10b981; --info: #0ea5e9; --warning: #f59e0b; --danger: #ef4444; --teal: #14b8a6; /* ── Semantic UI vars (thay hardcoded states) ───────── */ --hover-bg: var(--primary-50); /* hover hàng bảng, nav item */ --active-bg: var(--primary-100); /* selected row, qs-active */ --header-bg: var(--navy); /* header top */ --surface-sub: var(--slate-50); /* yearpicker, block-sub bg */ /* ── Spacing — nhân 4px ─────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ── Sizing ─────────────────────────────────────────── */ --input-h: 38px; --btn-h: 38px; --header-h: 64px; /* ── Radius ─────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 16px; /* ── Shadow ─────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.05); --shadow: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.14); /* ── Transition ─────────────────────────────────────── */ --transition: .18s ease; /* ── Legacy aliases (backwards compat) ─────────────── */ --line: var(--border); --text-main: var(--text); --text-muted: var(--muted); --primary-bg: var(--primary-light); --header-height: var(--header-h); --bg: var(--bg-body); /* ── Surface aliases (dùng cho dropdown, panel) ─────── */ --surface: #ffffff; --text-1: var(--slate-800); --text-2: var(--slate-700); --text-3: var(--slate-500); } /* ══════════════════════════════════════════════════════ DARK MODE — [data-theme="dark"] trên ══════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-body: #0f172a; --bg-card: #1e293b; --bg-sub: #162032; --border: #334155; --text: #f1f5f9; --muted: #94a3b8; --primary-light: #1e0505; --primary-50: #2d0a0a; --primary-100: #3d1010; --primary-200: #5c1a1a; --surface: #1e293b; --surface-sub: #162032; --text-1: #f1f5f9; --text-2: #cbd5e1; --text-3: #64748b; --line: #334155; --hover-bg: #2d0a0a; --active-bg: #3d1010; }