/* Palette: white/light surfaces, ink text, blue accent — matches the WealthSmith reference theme. Dark mode overrides these same tokens further down — see "Dark mode" section. */ :root { color-scheme: light; --bg: #f6f7fa; --bg-2: #eef1f5; --surface: #ffffff; --surface-raised: #ffffff; --border: #e7eaf0; --border-2: #d7dce5; --text: #0c1524; --text-muted: #667085; --text-faint: #98a2b3; --accent: #2f5fe8; --accent-dim: #2249c4; --accent-soft: #eef2ff; --accent-light: #7fa8ff; --accent-secondary: #4f46e5; --accent-border: #dbeafe; --success: #12b76a; --success-soft: #ecfdf3; --danger: #f04438; --danger-soft: #fef3f2; --danger-border: #fecaca; --danger-dim: #dc2626; --chart-secondary: #f59e0b; --on-accent: #ffffff; --overlay-blur: rgba(255, 255, 255, 0.75); --overlay-blur-strong: rgba(255, 255, 255, 0.85); --skel-shine: rgba(255, 255, 255, 0.7); /* Glass surfaces — same hue as --surface, just translucent, paired with backdrop-filter blur on the elements that use them (see dashboard.css). */ --surface-glass: rgba(255, 255, 255, 0.6); --surface-glass-strong: rgba(255, 255, 255, 0.78); --glass-blur: 20px; /* Categorical series palette (validated: node scripts/validate_palette.js — see dataviz skill). Fixed hue-per-category, never reassigned by rank — used by the Exposure Allocation donut chart. */ --series-equity-domestic: #2a78d6; --series-equity-intl: #eb6834; --series-debt: #1baf7a; --series-gold: #eda100; --series-liquid: #e87ba4; --series-silver: #008300; --series-hybrid: #4a3aa7; --series-commodity: #e34948; --series-other: #98a2b3; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.16), 0 4px 10px -4px rgba(16, 24, 40, 0.06); --shadow-blue: 0 8px 20px -6px rgba(47, 95, 232, 0.3); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Dark mode — follows system preference by default; [data-theme] on (set by theme.js, persisted in localStorage) overrides it explicitly in either direction. See static/theme.js for the toggle + no-flash init. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a0e14; --bg-2: #121722; --surface: #161d29; --surface-raised: #1b2330; --border: #232b3a; --border-2: #303a4d; --text: #e8ecf3; --text-muted: #98a2b3; --text-faint: #64748b; --accent: #5b8def; --accent-dim: #7ba3f2; --accent-soft: #16233d; --accent-light: #5b8def; --accent-secondary: #7c6ff0; --accent-border: #2a3b5c; --success: #3ddc91; --success-soft: #0f2a1e; --danger: #ff6b6b; --danger-soft: #2f1518; --danger-border: #4a2328; --danger-dim: #ff8787; --chart-secondary: #fbbf24; --on-accent: #ffffff; --overlay-blur: rgba(10, 14, 20, 0.75); --overlay-blur-strong: rgba(10, 14, 20, 0.85); --skel-shine: rgba(255, 255, 255, 0.08); --surface-glass: rgba(22, 29, 41, 0.55); --surface-glass-strong: rgba(22, 29, 41, 0.72); --glass-blur: 20px; --series-equity-domestic: #3987e5; --series-equity-intl: #d95926; --series-debt: #199e70; --series-gold: #c98500; --series-liquid: #d55181; --series-silver: #008300; --series-hybrid: #9085e9; --series-commodity: #e66767; --series-other: #64748b; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.28); --shadow-lg: 0 20px 36px -8px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.3); --shadow-blue: 0 8px 20px -6px rgba(91, 141, 239, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0e14; --bg-2: #121722; --surface: #161d29; --surface-raised: #1b2330; --border: #232b3a; --border-2: #303a4d; --text: #e8ecf3; --text-muted: #98a2b3; --text-faint: #64748b; --accent: #5b8def; --accent-dim: #7ba3f2; --accent-soft: #16233d; --accent-light: #5b8def; --accent-secondary: #7c6ff0; --accent-border: #2a3b5c; --success: #3ddc91; --success-soft: #0f2a1e; --danger: #ff6b6b; --danger-soft: #2f1518; --danger-border: #4a2328; --danger-dim: #ff8787; --chart-secondary: #fbbf24; --on-accent: #ffffff; --overlay-blur: rgba(10, 14, 20, 0.75); --overlay-blur-strong: rgba(10, 14, 20, 0.85); --skel-shine: rgba(255, 255, 255, 0.08); --surface-glass: rgba(22, 29, 41, 0.55); --surface-glass-strong: rgba(22, 29, 41, 0.72); --glass-blur: 20px; --series-equity-domestic: #3987e5; --series-equity-intl: #d95926; --series-debt: #199e70; --series-gold: #c98500; --series-liquid: #d55181; --series-silver: #008300; --series-hybrid: #9085e9; --series-commodity: #e66767; --series-other: #64748b; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.28); --shadow-lg: 0 20px 36px -8px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.3); --shadow-blue: 0 8px 20px -6px rgba(91, 141, 239, 0.35); } * { box-sizing: border-box; } html { max-width: 100%; } body { margin: 0; max-width: 100%; background: radial-gradient(1100px 600px at 90% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at -10% 30%, var(--success-soft), transparent 55%), var(--bg); color: var(--text); transition: background 0.2s var(--ease), color 0.2s var(--ease); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; } ::selection { background: var(--accent-soft); color: var(--accent-dim); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } .auth-link-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; } .auth-link-btn:hover { color: var(--text); } .mode-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; margin-bottom: 20px; } .mode-btn { background: transparent; color: var(--text-muted); border: none; border-radius: 6px; padding: 7px 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } .mode-btn.active { background: var(--accent); color: var(--on-accent); } .mode-btn:not(.active):hover { color: var(--text); } .controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .controls #fetch-btn { flex-shrink: 0; } .quote-ltp-label { font-size: 12px; color: var(--text-muted); text-align: right; } .search-wrapper { position: relative; flex: 1; min-width: 200px; } input, button { font-family: inherit; font-size: 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 10px 14px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease); } input { width: 100%; background: var(--surface); color: var(--text); } input::placeholder { color: var(--text-faint); } input:disabled { color: var(--text-muted); background: var(--bg-2); } input:hover:not(:disabled):not(:focus) { border-color: var(--border-2); } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); } /*