/* ============================================ SIA DESIGN CENTER — Dark Theme v0.1.0 The default theme for the Shilpkar AI Ecosystem. Usage: Add data-theme="dark" to or ============================================ */ [data-theme="dark"] { /* Background hierarchy */ --sia-bg-base: #0A0E17; --sia-bg-surface: #111D2E; --sia-bg-elevated: #1A2332; --sia-bg-hover: #1E293B; /* Text */ --sia-text-primary: #E0E0E0; --sia-text-secondary: #AABBCC; --sia-text-muted: #6688AA; /* Borders */ --sia-border-color: #1A2A3F; --sia-border-hover: #2A3A5A; /* Neutral scale — inverted for dark */ --sia-neutral-50: #0F172A; --sia-neutral-100: #1E293B; --sia-neutral-200: #334155; --sia-neutral-300: #475569; --sia-neutral-400: #64748B; --sia-neutral-500: #94A3B8; --sia-neutral-600: #CBD5E1; --sia-neutral-700: #E2E8F0; --sia-neutral-800: #F1F5F9; --sia-neutral-900: #F8FAFC; /* Absolute */ --sia-white: #0F172A; --sia-black: #FFFFFF; /* Shadows — darker for depth */ --sia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sia-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --sia-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --sia-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); /* Scrollbar */ scrollbar-color: var(--sia-neutral-600) var(--sia-bg-base); } [data-theme="dark"] body { color: var(--sia-text-primary); background: var(--sia-bg-base); } /* Custom scrollbar for Webkit */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sia-bg-base); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sia-neutral-600); border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--sia-neutral-500); }