/* Design tokens. Light is the default; [data-theme="dark"] overrides. The JS resolves "system" to an explicit light/dark value on . */ :root { /* Brand */ --brand: #6366f1; --brand-strong: #4f46e5; --brand-soft: #eef2ff; --accent: #a855f7; --brand-gradient: linear-gradient(135deg, #6366f1, #a855f7); /* Status */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; /* Surfaces (light) */ --bg: #f8fafc; --bg-elev: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --surface-glass: rgba(255, 255, 255, 0.75); --border: #e2e8f0; --border-strong: #cbd5e1; --border-glass: rgba(255, 255, 255, 0.4); /* Text */ --text: #0f172a; --text-2: #475569; --text-muted: #94a3b8; --on-brand: #ffffff; /* Effects */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow: 0 4px 15px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.1), 0 8px 18px rgba(15, 23, 42, 0.06); --shadow-glow: 0 8px 24px rgba(99, 102, 241, 0.35); --shadow-glow-accent: 0 8px 24px rgba(168, 85, 247, 0.35); --ring: 0 0 0 3px rgba(99, 102, 241, 0.28); /* Radius */ --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Spacing + type */ --sp: 4px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --sidebar-w: 260px; --topbar-h: 68px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --speed: 300ms; /* A subtle checkerboard for transparent previews */ --checker: conic-gradient(#0000 90deg, rgba(125, 130, 145, 0.14) 0 180deg, #0000 0 270deg, rgba(125, 130, 145, 0.14) 0) 0 0 / 20px 20px; } [data-theme='dark'] { --brand: #818cf8; --brand-strong: #6366f1; --brand-soft: rgba(99, 102, 241, 0.15); --accent: #c084fc; --brand-gradient: linear-gradient(135deg, #6366f1, #a855f7); --bg: radial-gradient(circle at 50% 10%, #2e1a47 0%, #090b10 100%); --bg-elev: rgba(255, 255, 255, 0.02); --surface: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.08); --surface-glass: rgba(20, 20, 30, 0.6); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-glass: rgba(255, 255, 255, 0.08); --text: #F1F5F9; --text-2: #CBD5E1; --text-muted: #64748B; --on-brand: #ffffff; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 32px 64px rgba(0, 0, 0, 0.6); --shadow-glow: 0 8px 24px rgba(99, 102, 241, 0.25); --shadow-glow-accent: 0 8px 24px rgba(168, 85, 247, 0.25); --ring: 0 0 0 3px rgba(129, 140, 248, 0.35); }