/* css-version: 58 */ /* ============================================================================ Called The Trade — design system ported from the v3-2 prototype (ThesisDesk.jsx). Mobile-first single column (560px), warm paper, IBM Plex Sans/Mono. No build step: semantic classes, not utility classes. ========================================================================== */ :root { --paper: #FAFAF6; --card: #FFFFFF; --ink: #16213A; --slate: #5B6880; --faint: #8B94A8; --line: #E4E2D9; --line-soft:#EFEDE5; --up: #1B6B4A; --up-soft: #E7F2EC; --down: #B3382C; --down-soft:#F8EAE8; --you: #B8860B; --you-soft: #F7EFDA; /* gold — the user's own view */ --navy: #1F3A6E; --navy-soft:#E9EEF7; --amber-soft:#FBF6E9; /* theme-stable accent surfaces: text ON a dark accent stays light in BOTH themes, and the primary-button surface has its own token so it doesn't invert with --ink */ --on-accent: #FAFAF6; --accent-strong: #16213A; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --shadow: 0 1px 3px rgba(20,33,58,.08); } /* Dark theme — remaps the tokens; components built on var() follow automatically. Set on by the bootstrap script in base.html (stored choice or OS preference). */ :root[data-theme="dark"] { --paper: #0F131C; --card: #1A2130; --ink: #E7EAF0; --slate: #A6B0C4; --faint: #6E7A92; --line: #2C3648; --line-soft:#232C3B; --up: #43C282; --up-soft: #14311F; --down: #E9776B; --down-soft:#3A1A16; --you: #D9AC4E; --you-soft: #332912; --navy: #3E5EA0; --navy-soft:#1D2A44; --amber-soft:#2A2411; --on-accent: #F2F5FA; --accent-strong: #34406A; --shadow: 0 1px 3px rgba(0,0,0,.45); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); } [x-cloak] { display: none !important; } /* full-width sliders everywhere (mobile-safe) — the UA default width made them span only a fraction of their section, so precision suffered. block + 100% fills the container. */ input[type=range] { display: block; width: 100%; height: 4px; accent-color: var(--navy); margin: 0; } /* Buttons don't inherit text colour by default — bare