/* ============================================================ OfficeAI — Design Tokens (CSS biến dùng chung cho mọi app) Nguồn: docs/plans/18-css-tokens-plan.md Nạp SỚM trong của _Layout (trước các CSS khác). Cách dùng trong CSS: color: var(--color-text); Luôn có thể kèm fallback: color: var(--color-text, #111827); ------------------------------------------------------------ Đổi động (sau này): - Dark mode: set document.documentElement.dataset.theme = 'dark' - Brand theo tenant: documentElement.style.setProperty('--brand-primary', '#xxxxxx') ============================================================ */ :root { /* ---- Brand (màu chính — CHỐT #3b82f6) ---- */ --brand-primary: #3b82f6; --brand-primary-hover: #2563eb; --brand-primary-active: #1d4ed8; --brand-primary-soft: #eff6ff; --brand-on-primary: #ffffff; /* ---- Semantic ---- */ --color-success: #10b981; --color-success-soft: #ecfdf5; --color-warning: #f59e0b; --color-warning-soft: #fffbeb; --color-danger: #ef4444; --color-danger-soft: #fef2f2; --color-info: #3b82f6; --color-info-soft: #eff6ff; /* ---- Nền (surface) ---- */ --surface: #ffffff; --surface-2: #f8fafc; --surface-page: #f4f6fa; /* ---- Chữ ---- */ --color-text: #111827; --color-text-2: #4b5563; --color-text-muted: #6b7280; --color-text-subtle: #94a3b8; /* ---- Viền ---- */ --border: #e5e7eb; --border-strong: #d1d5db; --border-subtle: #f3f4f6; --border-2: #e2e8f0; /* viền tông slate */ /* ---- Neutral phụ (slate/gray — dùng nhiều ở text/nền phụ) ---- */ --color-ink: #0f172a; /* chữ đậm nhất */ --color-ink-2: #1e293b; --color-slate: #64748b; --color-slate-strong: #334155; --color-gray-strong: #374151; --surface-3: #f1f5f9; /* nền slate nhạt */ --surface-alt: #f9fafb; /* nền xám nhạt */ /* ---- Bo góc ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* ---- Đổ bóng ---- */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .03); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .05); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1); /* ---- Khoảng cách ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---- Font ---- */ --font-sans: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, sans-serif; } /* ------------------------------------------------------------ Dark mode — Phase 2. Bật bằng: (theme.js đọc localStorage 'oa-theme' và set thuộc tính này sớm trong để không nhấp nháy). Mọi var() có fallback nên nếu theme.js chưa tới, giao diện vẫn là light bình thường. ------------------------------------------------------------ */ :root[data-theme="dark"] { /* ---- Brand (sáng hơn 1 bậc để đủ tương phản trên nền tối) ---- */ --brand-primary: #3b82f6; --brand-primary-hover: #60a5fa; --brand-primary-active: #93c5fd; --brand-primary-soft: rgba(59, 130, 246, .16); --brand-on-primary: #ffffff; /* ---- Semantic (soft = nền trong suốt nhẹ) ---- */ --color-success: #34d399; --color-success-soft: rgba(16, 185, 129, .15); --color-warning: #fbbf24; --color-warning-soft: rgba(245, 158, 11, .15); --color-danger: #f87171; --color-danger-soft: rgba(239, 68, 68, .15); --color-info: #60a5fa; --color-info-soft: rgba(59, 130, 246, .16); /* ---- Nền (surface) ---- */ --surface: #0f172a; --surface-2: #1e293b; --surface-page: #0b1220; /* ---- Chữ ---- */ --color-text: #e5e7eb; --color-text-2: #cbd5e1; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; /* ---- Viền ---- */ --border: #334155; --border-strong: #475569; --border-subtle: #1e293b; --border-2: #334155; /* ---- Neutral phụ (ĐẢO chiều: ink = sáng nhất trên nền tối) ---- */ --color-ink: #f1f5f9; --color-ink-2: #e2e8f0; --color-slate: #94a3b8; --color-slate-strong: #cbd5e1; --color-gray-strong: #d1d5db; --surface-3: #1e293b; --surface-alt: #172033; /* ---- Đổ bóng (đậm hơn trên nền tối) ---- */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .4); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .6); } /* LƯU Ý: KHÔNG dùng @media (prefers-color-scheme: dark) để tự bật dark theo OS. Dark mode chưa sẵn sàng (theme Limitless/customize.css chưa tokenize → chỉ vùng đã token đổi màu, giao diện lệch nham nhở). Dark CHỈ bật khi set thủ công (Theme.setMode('dark')). Mặc định theme.js = light, không follow OS. */