/* ─────────────────────────────────────────────────────────────── Arterias — Design tokens A single source of truth for the design system: colours, spacing, typography, radii, shadows and motion. Dark-mode first. ─────────────────────────────────────────────────────────────── */ :root { /* Brand gradient anchors */ --brand-1: #7c5cff; --brand-2: #37d0ff; --brand-3: #ff7eb6; --gradient-brand: linear-gradient(120deg, #7c5cff 0%, #37d0ff 100%); --gradient-brand-soft: linear-gradient(120deg, rgba(124, 92, 255, 0.18), rgba(55, 208, 255, 0.18)); --gradient-aurora: radial-gradient(60% 80% at 20% 10%, rgba(124, 92, 255, 0.35), transparent 60%), radial-gradient(50% 70% at 90% 20%, rgba(55, 208, 255, 0.28), transparent 60%), radial-gradient(60% 90% at 50% 100%, rgba(255, 126, 182, 0.18), transparent 60%); /* Surfaces (dark) */ --bg: #07090f; --bg-elev: #0c0f1a; --surface: #111626; --surface-2: #161d31; --surface-3: #1c2440; --glass: rgba(20, 26, 45, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --border: #1e2740; --border-strong: #2a3556; /* Text */ --text: #eef1f8; --text-soft: #aeb8d0; --text-mut: #7c89a8; --text-faint: #56617e; /* Semantic */ --success: #3ddc97; --warning: #ffb454; --danger: #ff5c7c; --info: #37d0ff; --success-bg: rgba(61, 220, 151, 0.12); --warning-bg: rgba(255, 180, 84, 0.12); --danger-bg: rgba(255, 92, 124, 0.12); --info-bg: rgba(55, 208, 255, 0.12); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 4rem; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-full: 999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 40px rgba(124, 92, 255, 0.35); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.15s; --dur: 0.28s; --dur-slow: 0.5s; /* Layout */ --container: 1200px; --sidebar-w: 264px; --header-h: 68px; } /* Optional light theme — toggled by [data-theme="light"] on . */ [data-theme='light'] { --bg: #f6f7fb; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #f1f3f9; --surface-3: #e7ebf5; --glass: rgba(255, 255, 255, 0.7); --glass-border: rgba(15, 23, 42, 0.08); --border: #e2e7f0; --border-strong: #cdd5e5; --text: #0d1324; --text-soft: #3c465f; --text-mut: #66718c; --text-faint: #97a1bb; }