File size: 2,260 Bytes
5383ef0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | :root {
/* Brand palette */
--yellow: #e5c846;
--yellow-dim: #c9a f2e;
--yellow-glow: rgba(229, 200, 70, 0.18);
--blue: #3178c6;
--blue-bright: #4a9eff;
--blue-dim: rgba(49, 120, 198, 0.18);
--blue-glow: rgba(74, 158, 255, 0.14);
/* Neutrals - dark theme defaults */
--bg: #0d0e11;
--bg-surface: #131417;
--bg-raised: #1a1b20;
--bg-hover: #22242b;
--bg-active: #2a2c35;
--border: rgba(255,255,255,0.07);
--border-bright: rgba(255,255,255,0.14);
--text: #e8eaf0;
--text-dim: rgba(232, 234, 240, 0.55);
--text-muted: rgba(232, 234, 240, 0.35);
/* Sidebar */
--sidebar-width: 260px;
--sidebar-collapsed-width: 56px;
--sidebar-bg: #0f1013;
--sidebar-border: rgba(255,255,255,0.06);
/* Plan colors */
--plan-free: #8a8fa8;
--plan-light: #4a9eff;
--plan-core: #2dd4a6;
--plan-creator: #a78bfa;
--plan-professional: #e5c846;
/* Input */
--input-bg: #1a1b20;
--input-border: rgba(255,255,255,0.1);
--input-focus: rgba(74, 158, 255, 0.5);
/* Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* Transitions */
--transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
--shadow-md: 0 6px 20px rgba(0,0,0,0.4);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
--shadow-glow-blue: 0 0 0 1px var(--input-focus), 0 0 20px var(--blue-glow);
/* Fonts */
--font-sans: 'Geist', system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', 'Fira Code', monospace;
/* Z-layers */
--z-sidebar: 100;
--z-modal: 500;
--z-notify: 600;
--z-menu: 400;
}
[data-theme="light"] {
--bg: #f4f5f7;
--bg-surface: #ffffff;
--bg-raised: #f0f1f4;
--bg-hover: #e8e9ed;
--bg-active: #dfe0e6;
--border: rgba(0,0,0,0.08);
--border-bright: rgba(0,0,0,0.14);
--text: #1a1b20;
--text-dim: rgba(26, 27, 32, 0.6);
--text-muted: rgba(26, 27, 32, 0.38);
--sidebar-bg: #e8e9ed;
--sidebar-border: rgba(0,0,0,0.07);
--input-bg: #ffffff;
--input-border: rgba(0,0,0,0.12);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 6px 20px rgba(0,0,0,0.1);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
}
|