/* tokens.css โ€” single source of theme truth (design report ยง7). Dark is the default; light is opt-in via . One DOM, two themes โ€” no duplicate stylesheets. Visual refresh 2026-06-16 (UI-only): adds elevation, radius, gradient and focus-ring tokens for a premium fintech look. No data/logic/state changes โ€” every legacy variable name is preserved so app.css/app.js keep working. */ :root, :root[data-theme="dark"] { /* layered surfaces */ --bg-base: #090C12; --bg-app: radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, 0.06), transparent 60%), radial-gradient(900px 500px at -10% 0%, rgba(45, 212, 191, 0.05), transparent 55%), #090C12; --bg-card: #111722; --bg-card-hover: #161F2B; --bg-elevated: #141C28; --bg-inset: #0C1118; --border-soft: #1F2A37; --border-strong: #2B3A4B; --border-hair: rgba(255, 255, 255, 0.06); --text-primary: #E8EEF5; --text-muted: #93A1B1; --text-dim: #5E6B7B; --accent: #2DD4BF; --accent-2: #22D3EE; --accent-soft: rgba(45, 212, 191, 0.14); --info: #60A5FA; --pos: #34D399; --neg: #F87171; --warn: #FBBF24; --paper: #A78BFA; --stale: #7689A0; /* gradients */ --grad-accent: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%); --grad-hero: linear-gradient(135deg, #5EEAD4 0%, #67E8F9 60%, #818CF8 120%); --grad-line: linear-gradient(90deg, transparent, var(--border-strong), transparent); --grad-card-top: linear-gradient(90deg, rgba(45, 212, 191, 0.7), rgba(34, 211, 238, 0.25) 60%, transparent); /* elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.50); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28); --glow: 0 0 0 1px rgba(45, 212, 191, 0.04), 0 8px 24px rgba(0, 0, 0, 0.28); /* shape + focus */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); /* status dots */ --dot-green: #34D399; --dot-amber: #FBBF24; --dot-grey: #64748B; --dot-red: #F87171; } :root[data-theme="light"] { --bg-base: #F4F7FB; --bg-app: radial-gradient(1100px 560px at 85% -10%, rgba(8, 145, 178, 0.07), transparent 60%), radial-gradient(800px 460px at -8% 0%, rgba(13, 148, 136, 0.06), transparent 55%), #F4F7FB; --bg-card: #FFFFFF; --bg-card-hover: #F2F6FA; --bg-elevated: #FFFFFF; --bg-inset: #EEF3F8; --border-soft: #E3EAF1; --border-strong: #CDD8E3; --border-hair: rgba(15, 32, 47, 0.06); --text-primary: #142231; --text-muted: #51627A; --text-dim: #8494A6; --accent: #0D9488; --accent-2: #0891B2; --accent-soft: rgba(13, 148, 136, 0.12); --info: #2563EB; --pos: #059669; --neg: #DC2626; --warn: #B45309; --paper: #7C3AED; --stale: #64748B; --grad-accent: linear-gradient(135deg, #0D9488 0%, #0891B2 100%); --grad-hero: linear-gradient(135deg, #0D9488 0%, #0891B2 55%, #4F46E5 120%); --grad-line: linear-gradient(90deg, transparent, var(--border-strong), transparent); --grad-card-top: linear-gradient(90deg, rgba(13, 148, 136, 0.6), rgba(8, 145, 178, 0.2) 60%, transparent); --shadow-sm: 0 1px 2px rgba(16, 38, 60, 0.06); --shadow-md: 0 8px 24px rgba(16, 38, 60, 0.08); --shadow-lg: 0 20px 50px rgba(16, 38, 60, 0.12); --shadow-card: 0 1px 2px rgba(16, 38, 60, 0.06), 0 10px 28px rgba(16, 38, 60, 0.06); --glow: 0 1px 2px rgba(16, 38, 60, 0.05), 0 10px 28px rgba(16, 38, 60, 0.06); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); --dot-green: #059669; --dot-amber: #B45309; --dot-grey: #94A3B8; --dot-red: #DC2626; } /* Print = light theme, calm and screenshot-friendly. */ @media print { :root { color-scheme: light; } }