/* ══════════════════════════════════════════════════════════════════════ TOKENS — nguồn sự thật duy nhất về màu, chữ, khoảng cách, bo góc. MỌI file CSS khác chỉ được dùng var(--...) từ đây. Cần giá trị mới? Thêm biến vào file này, đừng viết thẳng mã màu. Chủ đề tối hoạt động theo 2 đường: - theo cài đặt hệ điều hành (prefers-color-scheme) - theo lựa chọn của người dùng () ══════════════════════════════════════════════════════════════════════ */ :root { /* ── Nền & bề mặt ────────────────────────────────────────────────── */ --bg: #F7F8FA; /* nền trang */ --surface: #FFFFFF; /* thẻ, bảng, panel */ --surface-2: #F2F4F7; /* nền chìm: thanh tiến độ, ô input */ --surface-hover: #F0F1F5; --overlay: rgba(16, 24, 40, .45); /* nền mờ sau modal */ /* ── Viền ────────────────────────────────────────────────────────── */ --border: #E6E8EC; --border-strong: #D0D5DD; /* ── Chữ ─────────────────────────────────────────────────────────── */ --text: #111827; --text-muted: #6B7280; --text-faint: #9CA3AF; --text-inverse: #FFFFFF; /* ── Màu thương hiệu ─────────────────────────────────────────────── */ --primary: #4F46E5; --primary-hover: #4338CA; --primary-active: #3730A3; --primary-soft: #EEF2FF; /* nền nhạt cho trạng thái được chọn */ --primary-border: #C7D2FE; /* ── Màu trạng thái ──────────────────────────────────────────────── */ --success: #10B981; --success-soft: #ECFDF5; --success-border: #A7F3D0; --warn: #F59E0B; --warn-soft: #FFFBEB; --warn-border: #FDE68A; --danger: #EF4444; --danger-soft: #FEF2F2; --danger-border: #FECACA; --info: #0EA5E9; --info-soft: #F0F9FF; --info-border: #BAE6FD; --neutral: #6B7280; --neutral-soft: #F3F4F6; --neutral-border: #E5E7EB; /* ── Độ gấp của deadline (dùng cho chip hạn, ô lịch) ─────────────── */ --due-far: var(--neutral); /* còn > 3 ngày */ --due-soon: var(--warn); /* còn <= 2 ngày */ --due-today: #F97316; /* hôm nay */ --due-overdue: var(--danger); /* đã quá hạn */ /* ── Màu chuyên môn (job role) — trùng với cột color trong DB ─────── */ --role-dev: #4F46E5; --role-art: #EC4899; --role-gamedesign: #F59E0B; --role-qa: #10B981; --role-pm: #0EA5E9; /* ── Màu thương hiệu ngoài — KHÔNG đổi theo chủ đề sáng/tối ─────── Logo Google bắt buộc đúng 4 màu này. Chúng là hằng số của bên thứ ba, không phải màu của app, nên cố tình KHÔNG có bản dành cho chủ đề tối. */ --google-blue: #4285F4; --google-red: #EA4335; --google-yellow: #FBBC05; --google-green: #34A853; /* ── Chữ ─────────────────────────────────────────────────────────── */ --font: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; --fs-xs: 11px; /* nhãn cột, badge nhỏ */ --fs-sm: 13px; /* chữ phụ, mô tả */ --fs-base: 14px; /* chữ thân — mặc định toàn app */ --fs-md: 16px; /* tiêu đề mục */ --fs-lg: 20px; /* tiêu đề trang */ --fs-xl: 28px; /* số liệu lớn trong thẻ KPI */ --fs-2xl: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.7; /* ── Khoảng cách — nhịp 4px ──────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10:40px; --space-12:48px; --space-16:64px; /* ── Bo góc ──────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; /* mặc định: nút, ô input */ --radius-lg: 14px; /* thẻ, modal */ --radius-full: 999px; /* ── Đổ bóng ─────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06); --shadow-lg: 0 8px 28px rgba(16,24,40,.12); --shadow-focus: 0 0 0 3px var(--primary-border); /* ── Kích thước bố cục ───────────────────────────────────────────── */ --sidebar-w: 240px; --detail-w: 360px; --drawer-w: 420px; --topbar-h: 56px; --row-h: 44px; /* chiều cao một dòng task/bảng */ --control-h: 36px; /* nút, input cỡ thường */ --control-h-sm: 28px; /* ── Chuyển động ─────────────────────────────────────────────────── */ --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 320ms cubic-bezier(.4, 0, .2, 1); /* ── Tầng xếp lớp ────────────────────────────────────────────────── */ --z-sticky: 10; --z-dropdown:100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; color-scheme: light; } /* ══ CHỦ ĐỀ TỐI ═══════════════════════════════════════════════════════ Chỉ định nghĩa lại biến, không định nghĩa lại quy tắc CSS. Guard :not([data-theme="light"]) để nút chọn sáng luôn thắng. ════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1115; --surface: #171A21; --surface-2: #1F232C; --surface-hover: #232833; --overlay: rgba(0, 0, 0, .6); --border: #262B36; --border-strong: #363D4B; --text: #E8EAED; --text-muted: #9BA3B0; --text-faint: #6B7280; --text-inverse: #0F1115; --primary: #7C7BF5; --primary-hover: #8F8EF7; --primary-active: #6A69E8; --primary-soft: #1E1D3A; --primary-border: #3A3878; --success-soft: #0D2A22; --success-border: #1C5545; --warn-soft: #2C2110; --warn-border: #5C4415; --danger-soft: #2C1416; --danger-border: #5C2427; --info-soft: #0C2231; --info-border: #16496B; --neutral-soft: #1F232C; --neutral-border: #2E3440; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 28px rgba(0,0,0,.5); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0F1115; --surface: #171A21; --surface-2: #1F232C; --surface-hover: #232833; --overlay: rgba(0, 0, 0, .6); --border: #262B36; --border-strong: #363D4B; --text: #E8EAED; --text-muted: #9BA3B0; --text-faint: #6B7280; --text-inverse: #0F1115; --primary: #7C7BF5; --primary-hover: #8F8EF7; --primary-active: #6A69E8; --primary-soft: #1E1D3A; --primary-border: #3A3878; --success-soft: #0D2A22; --success-border: #1C5545; --warn-soft: #2C2110; --warn-border: #5C4415; --danger-soft: #2C1416; --danger-border: #5C2427; --info-soft: #0C2231; --info-border: #16496B; --neutral-soft: #1F232C; --neutral-border: #2E3440; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 28px rgba(0,0,0,.5); color-scheme: dark; }