:root { color-scheme: light; --qj-navy: #0B1120; --qj-blue: #3B6EF6; --qj-blue-600: #2F5BD8; --qj-blue-700: #2550C4; --qj-blue-on-navy: #6E9BFF; --qj-blue-on-navy-hover: #A8C3FF; --qj-sky: #5BA9E6; --qj-navy-line: #1E2A44; --qj-navy-text: #C6CFDE; --bg: light-dark(#F6F8FB, #0B1120); --surface: light-dark(#FFFFFF, #121A2E); --surface-2: light-dark(#EEF2F7, #1A2440); --surface-sel: light-dark(#EEF3FF, #1A2648); --text: light-dark(#0F172A, #E8EDF5); --text-muted: light-dark(#475569, #8B97AD); --border: light-dark(#E2E8F0, #1E2A44); --border-control:light-dark(#7A8699, #66779A); --primary: light-dark(#2F5BD8, #6E9BFF); --primary-hover: light-dark(#2550C4, #9DB8FF); --on-primary: light-dark(#FFFFFF, #0B1120); --link: var(--primary); --focus: light-dark(#3B6EF6, #6E9BFF); --indicator: light-dark(#3B6EF6, #6E9BFF); --danger: light-dark(#B42318, #F97066); --danger-tint: light-dark(#FEF3F2, rgb(249 112 102 / 0.14)); --success: light-dark(#067647, #47CD89); --success-tint: light-dark(#ECFDF3, rgb(71 205 137 / 0.14)); --warning: light-dark(#B54708, #FDB022); --warning-tint: light-dark(#FFFAEB, rgb(253 176 34 / 0.14)); --chrome-bg: #0B1120; --chrome-line: #1E2A44; --chrome-text: #C6CFDE; --chrome-text-strong: #FFFFFF; --chrome-active-bg: #1A2440; --chrome-link: #6E9BFF; --font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --lh-tight: 1.25; --lh-body: 1.5; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --r-control: 8px; --r-panel: 12px; --r-pill: 999px; --shadow-1: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), transparent); --shadow-pop: 0 8px 24px light-dark(rgb(15 23 42 / 0.12), transparent), 0 0 0 1px light-dark(transparent, #1E2A44); --tap: 44px; --sidebar-w: 248px; --content-max: 1200px; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="system"] { color-scheme: light dark; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }