/* ============================================================ InfinityTrader — Design Tokens Fase 3. CSS puro, mobile-first. Troca de tema por [data-theme] no (default: A verde-água). Semânticas de trade fixas. ============================================================ */ :root{ /* neutros */ --c50:#f8fafb; --c100:#eef2f4; --c200:#dfe6ea; --c300:#c6d0d6; --c400:#9aa8b0; --c500:#6b7a83; --c600:#4a575e; --c700:#333d43; --c800:#20272b; --c900:#12171a; --white:#fff; --black:#0a0d0f; /* semânticas de trade */ --verde:#12b76a; --verde-bg:#e7f7ef; --vermelho:#f04438; --vermelho-bg:#fdeceb; --amarelo:#f79009; --amarelo-bg:#fef0dc; /* forma */ --radius:14px; --radius-sm:9px; --radius-lg:20px; --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10); --sombra-md:0 8px 24px rgba(16,24,40,.10); --sombra-lg:0 16px 40px rgba(16,24,40,.14); /* tipografia — system stack, zero webfont pesado */ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* sidebar admin (neutra, distinta do app) */ --side-bg:#12171a; --side-fg:#9aa8b0; } /* Tema A — Verde-água (default, identidade atual) */ :root, [data-theme="A"]{ --brand:#17b89a; --brand-dark:#0f8e78; --brand-light:#e6f7f3; --brand-grad:linear-gradient(135deg,#2ecc9f 0%,#17a8a0 100%); --app-side-bg:#0f2b2a; --app-side-fg:#bfe0da; --app-side-active:#17b89a; } /* Tema B — Petróleo / Âmbar */ [data-theme="B"]{ --brand:#e08a2b; --brand-dark:#b96f1c; --brand-light:#fbeed9; --brand-grad:linear-gradient(135deg,#f0a13d 0%,#e08a2b 100%); --app-side-bg:#141b24; --app-side-fg:#a6b3bf; --app-side-active:#e08a2b; } /* Tema C — Índigo / Lima */ [data-theme="C"]{ --brand:#5b5bd6; --brand-dark:#4646b0; --brand-light:#ecebfb; --brand-grad:linear-gradient(135deg,#6d6df0 0%,#5b5bd6 100%); --app-side-bg:#171633; --app-side-fg:#bcbbe6; --app-side-active:#8b8bf5; }