/* ========================================================================== Design tokens — "Aurora Glass" Theme is resolved to a concrete value on before first paint by theme-init.js, so CSS never has to handle "auto". Contrast note: translucency and legibility pull against each other. We win both by clamping the substrate to a narrow luminance band (see the veil in base.css) and keeping every glass fill above ~0.58 alpha. That makes the worst-case composite known at design time, so the ratios quoted below are the floor, not an average. ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Substrate ------------------------------------------------------------ */ --bg-base: #070A0F; --bg-veil: rgba(7, 10, 15, 0.62); --aurora-1: rgba(18, 122, 112, 0.50); --aurora-2: rgba(46, 74, 156, 0.44); --aurora-3: rgba(86, 56, 140, 0.34); --aurora-4: rgba(14, 40, 58, 0.40); --grain-opacity: 0.030; /* Glass fills, by elevation ------------------------------------------- */ --glass-1: rgba(19, 24, 33, 0.72); --glass-2: rgba(22, 28, 38, 0.62); --glass-2-solid: #151A23; --glass-3: rgba(29, 36, 48, 0.82); --glass-4: rgba(15, 20, 28, 0.90); --glass-inset: rgba(255, 255, 255, 0.035); --scrim: rgba(4, 7, 11, 0.64); /* Strokes & specular --------------------------------------------------- */ --stroke: rgba(255, 255, 255, 0.085); --stroke-strong: rgba(255, 255, 255, 0.16); --stroke-inset: rgba(0, 0, 0, 0.42); /* The signature: a rim that is bright where light enters, dead in the middle, and faintly lit again on the far edge — the way a real lens catches its environment. A flat 1px white border cannot do this. */ --specular: linear-gradient(152deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.16) 16%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0.00) 56%, rgba(255,255,255,0.09) 80%, rgba(255,255,255,0.28) 100%); --specular-soft: linear-gradient(152deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0.00) 60%, rgba(255,255,255,0.14) 100%); --sheen: radial-gradient(130% 90% at 50% -30%, rgba(255,255,255,0.085), transparent 62%); /* Text ----------------------------------------------------------------- */ --text-1: #EDF1F7; /* headings and numbers ~15:1 */ --text-2: #A7B2C2; /* body ~8.4:1 */ --text-3: #808C9E; /* labels, axes ~5.3:1 */ --text-4: #5C6675; /* decorative only — never used for text that matters */ --text-on-accent: #060A14; /* Accent --------------------------------------------------------------- */ --accent: #7C9CFF; --accent-hi: #9DB5FF; --accent-lo: #5B7CE6; --accent-wash: rgba(124, 156, 255, 0.14); --accent-ring: rgba(124, 156, 255, 0.55); /* Per-strategy accents, so the two never blur together ----------------- */ --accent-a: #7C9CFF; --accent-b: #A98BFF; --accent-a-wash: rgba(124, 156, 255, 0.14); --accent-b-wash: rgba(169, 139, 255, 0.14); /* Semantic ------------------------------------------------------------- */ --profit: #2FD9AE; --profit-hi: #5FE7C4; --profit-wash: rgba(47, 217, 174, 0.13); --loss: #FF6B5C; --loss-hi: #FF8C80; --loss-wash: rgba(255, 107, 92, 0.13); --warn: #FFB84D; --warn-wash: rgba(255, 184, 77, 0.14); --info: #6FC7FF; --info-wash: rgba(111, 199, 255, 0.13); --neutral: #8B97A8; --neutral-wash: rgba(139, 151, 168, 0.12); /* Rows ----------------------------------------------------------------- */ --row-hover: rgba(255, 255, 255, 0.045); --row-active: rgba(124, 156, 255, 0.10); --row-rule: rgba(255, 255, 255, 0.055); /* Elevation ------------------------------------------------------------ */ --shadow-1: 0 1px 1px rgba(0,0,0,.24), 0 2px 6px -2px rgba(0,0,0,.30); --shadow-2: 0 1px 1px rgba(0,0,0,.22), 0 4px 12px -3px rgba(0,0,0,.32), 0 18px 44px -16px rgba(0,0,0,.48); --shadow-3: 0 2px 4px rgba(0,0,0,.26), 0 10px 28px -6px rgba(0,0,0,.44), 0 30px 70px -22px rgba(0,0,0,.58); --shadow-4: 0 4px 10px rgba(0,0,0,.30), 0 24px 60px -12px rgba(0,0,0,.55), 0 60px 140px -40px rgba(0,0,0,.70); --blur-1: 20px; --sat-1: 165%; --blur-3: 30px; --sat-3: 180%; --blur-4: 40px; --sat-4: 190%; --bdf-brightness: 1.06; } /* ========================================================================== Light theme. Not an inversion: on light, a lens catches shadow on its lower edge rather than light, and the saturation boost has to come down or the whole thing reads as cheap plastic. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg-base: #EDF0F5; --bg-veil: rgba(246, 248, 252, 0.60); --aurora-1: rgba(86, 200, 186, 0.34); --aurora-2: rgba(126, 158, 248, 0.30); --aurora-3: rgba(176, 150, 235, 0.24); --aurora-4: rgba(150, 205, 230, 0.28); --grain-opacity: 0.022; --glass-1: rgba(252, 253, 255, 0.78); --glass-2: rgba(255, 255, 255, 0.70); --glass-2-solid: #F7F9FC; --glass-3: rgba(255, 255, 255, 0.88); --glass-4: rgba(252, 253, 255, 0.94); --glass-inset: rgba(14, 20, 32, 0.035); --scrim: rgba(30, 38, 52, 0.30); --stroke: rgba(14, 20, 32, 0.10); --stroke-strong: rgba(14, 20, 32, 0.18); --stroke-inset: rgba(255, 255, 255, 0.70); --specular: linear-gradient(152deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 14%, rgba(14,20,32,0.04) 44%, rgba(14,20,32,0.08) 64%, rgba(14,20,32,0.13) 100%); --specular-soft: linear-gradient(152deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.20) 30%, rgba(14,20,32,0.06) 100%); --sheen: radial-gradient(130% 90% at 50% -30%, rgba(255,255,255,0.75), transparent 60%); --text-1: #0E1420; --text-2: #465061; --text-3: #5A6475; --text-4: #8A93A2; --text-on-accent: #FFFFFF; --accent: #3B5BDB; --accent-hi: #2C48C4; --accent-lo: #6B85E8; --accent-wash: rgba(59, 91, 219, 0.10); --accent-ring: rgba(59, 91, 219, 0.50); --accent-a: #3B5BDB; --accent-b: #6B4FD8; --accent-a-wash: rgba(59, 91, 219, 0.10); --accent-b-wash: rgba(107, 79, 216, 0.10); --profit: #00795F; --profit-hi: #00604B; --profit-wash: rgba(0, 121, 95, 0.10); --loss: #C2361F; --loss-hi: #A22B17; --loss-wash: rgba(194, 54, 31, 0.10); --warn: #8A5A00; --warn-wash: rgba(138, 90, 0, 0.11); --info: #0B6FA8; --info-wash: rgba(11, 111, 168, 0.10); --neutral: #5C6675; --neutral-wash: rgba(92, 102, 117, 0.10); --row-hover: rgba(14, 20, 32, 0.035); --row-active: rgba(59, 91, 219, 0.075); --row-rule: rgba(14, 20, 32, 0.065); --shadow-1: 0 1px 1px rgba(22,32,50,.05), 0 2px 5px -2px rgba(22,32,50,.08); --shadow-2: 0 1px 1px rgba(22,32,50,.05), 0 4px 12px -3px rgba(22,32,50,.09), 0 18px 40px -16px rgba(22,32,50,.14); --shadow-3: 0 2px 4px rgba(22,32,50,.07), 0 10px 28px -6px rgba(22,32,50,.13), 0 30px 66px -22px rgba(22,32,50,.18); --shadow-4: 0 4px 10px rgba(22,32,50,.09), 0 24px 58px -12px rgba(22,32,50,.18), 0 60px 130px -40px rgba(22,32,50,.24); --blur-1: 18px; --sat-1: 140%; --blur-3: 26px; --sat-3: 150%; --blur-4: 36px; --sat-4: 155%; --bdf-brightness: 1.01; } /* ========================================================================== Theme-invariant ========================================================================== */ :root { --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --t-display: clamp(2rem, 1.5rem + 2vw, 2.75rem); --t-h1: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); --t-h2: 1.1875rem; --t-h3: 1rem; --t-body: 0.9375rem; --t-sm: 0.8125rem; --t-label: 0.6875rem; --t-micro: 0.625rem; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --rail-w: 246px; --topbar-h: 60px; --content-max: 1480px; --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.58, 1); --z-bg: 0; --z-content: 1; --z-rail: 20; --z-topbar: 25; --z-pop: 60; --z-tooltip: 70; --z-modal: 90; }