/* --------------------------------------------------------------------------- SafePass design tokens. Dark is the default. Light is opted into with , which an inline head script sets before first paint so the theme never flashes. `data-theme="dark"` forces dark over a light system preference. --------------------------------------------------------------------------- */ :root { /* Brand ramp */ --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --cyan-400: #22d3ee; /* Surfaces */ --bg: #07090f; --bg-veil: #0b0f1acc; --surface: #111726; --surface-2: #1a2133; --surface-3: #232c42; --line: #2a3450; --line-strong: #3b476a; /* Type */ --text: #f4f6fb; --text-2: #c3cbdd; --muted: #8f9ab3; /* Accents */ --primary: #8b5cf6; --primary-2: #a855f7; --primary-ink: #ffffff; --primary-soft: rgba(139, 92, 246, 0.16); --primary-ring: rgba(139, 92, 246, 0.38); --accent: var(--cyan-400); /* Status */ --success: #34d399; --danger: #f87171; --warning: #fbbf24; --success-soft: rgba(52, 211, 153, 0.14); --danger-soft: rgba(248, 113, 113, 0.14); --warning-soft: rgba(251, 191, 36, 0.14); /* Chrome */ --sidebar-bg: rgba(13, 18, 30, 0.82); --sidebar-bg-2: rgba(17, 23, 38, 0.94); --sidebar-border: rgba(139, 92, 246, 0.2); --card-sheen: rgba(255, 255, 255, 0.045); --card-edge: rgba(255, 255, 255, 0.07); --backdrop: rgba(3, 5, 12, 0.72); /* Elevation */ --shadow-sm: 0 2px 8px rgba(2, 5, 15, 0.5); --shadow: 0 18px 44px rgba(2, 5, 15, 0.62); --shadow-lg: 0 40px 90px rgba(2, 5, 15, 0.72); --glow: 0 10px 30px rgba(139, 92, 246, 0.35); /* Geometry */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 140ms; --t: 240ms; --t-slow: 420ms; /* Fonts */ --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Outfit", var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: dark; } :root[data-theme="light"] { --bg: #f5f4fd; --bg-veil: #ffffffcc; --surface: #ffffff; --surface-2: #f4f1fe; --surface-3: #eae5fc; --line: #e2ddf6; --line-strong: #cec6ee; --text: #16162a; --text-2: #3f4256; --muted: #656d85; --primary: #6d28d9; --primary-2: #8b5cf6; --primary-ink: #ffffff; --primary-soft: rgba(109, 40, 217, 0.09); --primary-ring: rgba(109, 40, 217, 0.3); --accent: #0891b2; --success: #059669; --danger: #dc2626; --warning: #d97706; --success-soft: rgba(5, 150, 105, 0.1); --danger-soft: rgba(220, 38, 38, 0.1); --warning-soft: rgba(217, 119, 6, 0.12); --sidebar-bg: rgba(255, 255, 255, 0.76); --sidebar-bg-2: rgba(246, 243, 255, 0.94); --sidebar-border: rgba(109, 40, 217, 0.14); --card-sheen: rgba(255, 255, 255, 0.7); --card-edge: rgba(255, 255, 255, 0.9); --backdrop: rgba(30, 22, 60, 0.42); --shadow-sm: 0 2px 8px rgba(60, 45, 120, 0.08); --shadow: 0 18px 44px rgba(60, 45, 120, 0.13); --shadow-lg: 0 40px 90px rgba(60, 45, 120, 0.18); --glow: 0 10px 30px rgba(109, 40, 217, 0.28); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }