/* ============================================================ CryptoSignals.bot Web โ€” main.css ยท BASE LAYER + utilities only. Ported from design_handoff/prototype/css/app.css (base shell). Load order: tokens.css -> fonts.css -> main.css -> surface css. Every color/radius/shadow/font comes from tokens.css โ€” never hardcode a value that exists as a token. Surface-specific layout (Website sections) lives in its own sheet, NOT here. Dark is the DEFAULT theme; data-theme is set on before first paint and persisted (cookie + localStorage, js/theme.js). ============================================================ */ /* ---------- reset / base shell (prototype app.css verbatim) ---------- */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--fs-ui); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:13px; line-height:1.45; } button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font-family:inherit;color:inherit} a{color:var(--accent)} ::selection{background:var(--accent-2)} /* ---------- utilities ---------- */ /* numbers/prices ALWAYS mono with tabular figures */ .mono{font-family:var(--fs-mono);font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:-.01em} /* semantic market colors โ€” buy/gain and sell/loss, NOT brand accents */ .up{color:var(--up)} .down{color:var(--down)} .visually-hidden{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;border:0; clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap; } /* ---------- scrollbars (prototype app.css verbatim) ---------- */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--text-3)} *::-webkit-scrollbar-track{background:transparent} /* ---------- accessibility baseline ---------- */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }