/*
Tomailab Design System — Design Tokens
---------------------------------------
Nguồn gốc: chốt từ CRSEO "Clean Light" (design/ui-ux-spec.md + mockups/crseo-mockup.html).
Namespace toàn bộ biến bằng "--ds-" để không đụng CSS sẵn có của từng project
(Tailwind, Ant Design, v.v.) khi nhúng chung.
Cách dùng nhanh:
Dark mode: hoặc thêm class .ds-dark lên .
Đổi brand màu: — xem khối [data-brand] phía dưới + README.md.
*/
:root{
/* ===== Neutrals (không đổi theo brand) ===== */
--ds-color-bg: #fafafa;
--ds-color-surface: #ffffff;
--ds-color-surface-2: #f4f4f5; /* nền hover / chip / pill */
--ds-color-surface-3: #f9f9fb; /* nền note / pipeline step */
--ds-color-border: #ececef;
--ds-color-border-strong: #e0e0e6;
--ds-color-text: #18181b;
--ds-color-text-secondary: #3f3f46;
--ds-color-muted: #71717a;
--ds-color-faint: #a1a1aa;
--ds-color-overlay: rgba(24,24,27,.4);
/* ===== Semantic status (không đổi theo brand) ===== */
--ds-color-success: #16a34a; --ds-color-success-soft: #f0fdf4; --ds-color-success-border: #bbf7d0;
--ds-color-warning: #d97706; --ds-color-warning-soft: #fffbeb;
--ds-color-danger: #dc2626; --ds-color-danger-soft: #fef2f2; --ds-color-danger-border: #fecaca;
--ds-color-info: #2563eb; --ds-color-info-soft: #eff6ff;
--ds-color-violet: #9333ea; --ds-color-violet-soft: #faf5ff;
/* ===== Brand accent (mặc định = CRSEO, brand tham chiếu) =====
Mọi project override 3 biến này (accent/accent-hover/accent-soft/accent-2)
ở :root của chính mình để đổi màu thương hiệu mà giữ nguyên toàn bộ layout/spacing. */
--ds-color-accent: #4f46e5;
--ds-color-accent-hover: #4338ca;
--ds-color-accent-soft: #eef2ff;
--ds-color-accent-2: #a855f7; /* màu phụ dùng cho gradient / biểu đồ 2 dải */
/* ===== Radius ===== */
--ds-radius-lg: 16px; /* card / panel / modal */
--ds-radius-md: 10px; /* input / button / control */
--ds-radius-pill: 20px; /* chip / pill / switch */
--ds-radius-sm: 6px; /* badge */
/* ===== Shadow ===== */
--ds-shadow-card: 0 1px 3px rgba(0,0,0,.03);
--ds-shadow-float: 0 10px 40px rgba(0,0,0,.06);
--ds-shadow-modal: 0 24px 70px rgba(0,0,0,.25);
--ds-shadow-node: 0 4px 12px rgba(0,0,0,.12);
/* ===== Typography ===== */
--ds-font-sans: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
--ds-font-mono: 'JetBrains Mono', Consolas, monospace;
--ds-font-size-base: 14px;
--ds-line-height-base: 1.55;
--ds-heading-weight: 700;
--ds-heading-tracking: -0.02em;
/* ===== Spacing scale (8px base, tham chiếu — component có thể lệch nhẹ để khớp mockup gốc) ===== */
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 20px;
--ds-space-6: 24px;
--ds-space-7: 32px;
--ds-space-8: 40px;
/* ===== Z-index ===== */
--ds-z-topbar: 5;
--ds-z-overlay: 50;
}
/* ===== Dark theme =====
Áp bằng (khuyến nghị) — .ds-dark trên body vẫn hỗ trợ cho project cũ dùng class-toggle. */
[data-theme="dark"],
.ds-dark{
--ds-color-bg: #0b0b10;
--ds-color-surface: #15151c;
--ds-color-surface-2: #1c1c25;
--ds-color-surface-3: #101017;
--ds-color-border: #23232e;
--ds-color-border-strong: #2c2c38;
--ds-color-text: #e8eaf0;
--ds-color-text-secondary: #c7c8d1;
--ds-color-muted: #9b9ba8;
--ds-color-faint: #6b6b78;
--ds-color-overlay: rgba(0,0,0,.6);
--ds-color-success: #4ade80; --ds-color-success-soft: #0f2417; --ds-color-success-border: #1c4a2c;
--ds-color-warning: #fbbf24; --ds-color-warning-soft: #2a2008;
--ds-color-danger: #f87171; --ds-color-danger-soft: #2a1212; --ds-color-danger-border: #4a1f1f;
--ds-color-info: #60a5fa; --ds-color-info-soft: #12213a;
--ds-color-violet: #c084fc; --ds-color-violet-soft: #241a33;
--ds-color-accent: #818cf8;
--ds-color-accent-hover: #6f79f0;
--ds-color-accent-soft: #1e1b3a;
--ds-color-accent-2: #c084fc;
--ds-shadow-card: 0 1px 3px rgba(0,0,0,.4);
--ds-shadow-float: 0 10px 40px rgba(0,0,0,.5);
--ds-shadow-modal: 0 24px 70px rgba(0,0,0,.6);
}
/*
===== VÍ DỤ multi-brand trong cùng codebase =====
Nếu một app phải render nhiều brand Tomailab (ví dụ trang giới thiệu sản phẩm),
dùng data-brand thay vì override :root toàn cục. Đây là TEMPLATE ví dụ (màu minh hoạ,
không phải màu chính thức của brand nào) — copy khối này và đổi giá trị khi có brand mới.
[data-brand="example"]{
--ds-color-accent: #0d9488;
--ds-color-accent-hover: #0f766e;
--ds-color-accent-soft: #ecfdf5;
--ds-color-accent-2: #f59e0b;
}
*/