/* ========================================================================== Investor Second Brain -- design tokens (2026-09-29 "decision workspace"). Art direction (docs/brain_v2_redesign/reference_mock.html): a financial decision workspace -- calm, evidence-led, dense. Neutral slate surfaces, one emerald signal colour, red / amber reserved for bearish / mixed. Every colour on every brain_v2 page comes from here. Two deliberate departures from the reference mock, both for WCAG AA text contrast: --faint #87918a -> #667169 (light) / #737e76 -> #8a958d (dark); 12px meta text sat at ~3.3:1, now >= 4.6:1 on panels. --on-accent text on the solid accent. The mock used #fff in both themes, which is ~2:1 on the dark theme's light-green accent. Theme is stamped server-side as from the brain_theme cookie; the toggle flips the attribute + cookie. ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; --bg: #f2f4f1; --panel: #ffffff; --panel-2: #f8f9f7; --panel-3: #ebeeea; --border: #d9ddd7; --border-strong: #c3cac4; --text: #17201b; --muted: #5d6961; --faint: #667169; --accent: #126b4c; --accent-hover: #0c563d; --accent-soft: #dfede6; --accent-text: #0d5e41; --on-accent: #ffffff; --red: #a23b43; --red-soft: #f5e5e6; --amber: #8b5b18; --amber-soft: #f3ead9; --blue: #285e8f; --blue-soft: #e3ebf3; --overlay: rgba(11, 17, 13, 0.35); --shadow: 0 8px 30px rgba(25, 35, 28, 0.07); --shadow-sm: 0 1px 3px rgba(25, 35, 28, 0.06); --shadow-pop: 0 16px 48px rgba(25, 35, 28, 0.16); } [data-theme="dark"] { color-scheme: dark; --bg: #101512; --panel: #171c18; --panel-2: #1c221e; --panel-3: #242b26; --border: #333d35; --border-strong: #48534b; --text: #edf2ee; --muted: #a6b0a8; --faint: #8a958d; --accent: #67c49c; --accent-hover: #80d1ad; --accent-soft: #1b392c; --accent-text: #78d0aa; --on-accent: #0b1a12; --red: #ed8990; --red-soft: #3d2528; --amber: #e1b16f; --amber-soft: #3c3020; --blue: #8ebce8; --blue-soft: #233447; --overlay: rgba(0, 0, 0, 0.5); --shadow: 0 12px 40px rgba(0, 0, 0, 0.28); --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.2); --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.45); } :root { /* Radii */ --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 20px; /* Spacing (4px grid) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; /* Type scale */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: clamp(24px, 2.5vw, 32px); /* Families. Satoshi has no U+20B9, so the vendored Inter Variable renders the rupee sign; system fonts cover anything else. */ --font-body: "Satoshi", "Inter Variable", "Helvetica Neue", system-ui, sans-serif; --font-display: "Cabinet Grotesk", "Satoshi", "Inter Variable", "Helvetica Neue", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Layout */ --sidebar-w: 244px; --topbar-h: 68px; --content-max: 1440px; --gutter: clamp(16px, 3vw, 40px); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }