/* tokens.css -- SI-REQ-020 shared design tokens. * * The SINGLE source of color / typography / spacing / radius / shadow / motion for the whole * site. Loaded FIRST on every page (before per-app sheets) so every var() resolves. Per * AGENTS S3, no hardcoded theme values live outside this file -- the no-hardcoded-hex test * (test_design_system.py) exempts ONLY this file. */ :root { /* ---- Color (consolidated from dashboard.css; accounts.css private tokens map onto these) ---- */ --bg: #0f1115; --panel: #171a21; --panel-2: #1d212b; --fg: #e6e8eb; --muted: #8a93a0; --accent: #3b82f6; /* unified primary-action color (SI-REQ-020 accent decision) */ --accent-weak: #2a313d; /* muted accent surface (active tabs / hovers) */ --pos: #22c55e; /* positive numbers / up days */ --neg: #ef4444; /* negative numbers / down days */ --warn: #f59e0b; /* amber cautions (e.g. ticker add could not be validated) */ --on-accent: #ffffff; /* text/icon color on accent-filled surfaces */ --border: #2a313d; /* Chart series (SI-REQ-019) */ --chart-sma20: #f59e0b; --chart-sma50: #a855f7; --chart-bench: #94a3b8; /* Screener heat-map bands (SI-REQ-010) */ --heat-darkgreen: #006400; --heat-green: #28a745; --heat-red: #dc3545; --heat-yellow: #ffea00; --heat-on-dark: #ffffff; --heat-on-light: #000000; /* ---- Radius ---- */ --radius: 10px; --radius-sm: 6px; /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --gap: 16px; --space-5: 24px; --space-6: 32px; /* ---- Typography scale ---- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8rem; --fs-base: 0.9rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --lh-tight: 1.25; --lh: 1.4; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; /* ---- Elevation / shadow ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; font-family: var(--font-sans); color-scheme: dark; } /* ---- Light theme (SI-DEV-REQ-023) ---- * Activated by [data-theme="light"] on (set before first paint by static/js/theme.js). * Only color values that fail contrast on a light surface are overridden; the :root (dark) tokens * remain the default and fall through for anything not listed here. Darkens the green/red number * colors and the chart series so they stay legible on a white panel. */ [data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --panel: #ffffff; --panel-2: #eceef2; --fg: #16191f; --muted: #5a6371; --accent: #2563eb; --accent-weak: #e4ebf7; --pos: #15803d; --neg: #dc2626; --warn: #b45309; --on-accent: #ffffff; --border: #d6dbe3; --chart-sma20: #b45309; --chart-sma50: #6d28d9; --chart-bench: #475569; }