77 lines
1.9 KiB
CSS
77 lines
1.9 KiB
CSS
/* ===== Design Tokens =====
|
|
Single source of truth for all visual values.
|
|
Every component/view must reference these variables instead of hardcoded values.
|
|
*/
|
|
|
|
:root {
|
|
/* ---- Color Palette ---- */
|
|
--color-primary: #3b82f6;
|
|
--color-primary-light: #eff6ff;
|
|
--color-primary-dark: #1d4ed8;
|
|
|
|
--color-success: #22c55e;
|
|
--color-success-light: #f0fdf4;
|
|
--color-success-dark: #15803d;
|
|
|
|
--color-warning: #f59e0b;
|
|
--color-warning-light: #fffbeb;
|
|
--color-warning-dark: #b45309;
|
|
|
|
--color-danger: #ef4444;
|
|
--color-danger-light: #fef2f2;
|
|
--color-danger-dark: #b91c1c;
|
|
|
|
/* ---- Surfaces & Backgrounds ---- */
|
|
--bg-page: #f3f7fc;
|
|
--bg-surface: rgba(255, 255, 255, 0.94);
|
|
--bg-sidebar: rgba(255, 255, 255, 0.92);
|
|
--bg-subtle: rgba(15, 93, 216, 0.06);
|
|
|
|
/* ---- Text ---- */
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--text-muted: #94a3b8;
|
|
|
|
/* ---- Borders ---- */
|
|
--border-default: rgba(86, 108, 138, 0.12);
|
|
--border-hover: rgba(37, 99, 235, 0.28);
|
|
|
|
/* ---- Spacing (4px base) ---- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
|
|
/* ---- Border Radius ---- */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 999px;
|
|
|
|
/* ---- Shadows ---- */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07);
|
|
--shadow-lg: 0 10px 30px rgba(30, 49, 78, 0.08);
|
|
|
|
/* ---- Typography ---- */
|
|
--font-sans: 'PingFang SC', 'SF Pro Display', 'Segoe UI', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
|
|
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-base: 14px;
|
|
--text-lg: 16px;
|
|
--text-xl: 20px;
|
|
--text-2xl: 24px;
|
|
--text-3xl: 28px;
|
|
|
|
/* ---- Breakpoints (for reference, not used as CSS variables directly) ---- */
|
|
--bp-lg: 1200px;
|
|
--bp-md: 900px;
|
|
--bp-sm: 640px;
|
|
}
|