@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@600;700;800&display=swap'); /* Tokens e componentes da identidade VSystems. */ /* =========================================================================== TOKENS DE TEMA — todo valor de cor do app sai daqui. O tema é escolhido trocando data-bs-theme no (ver core/theme.ts + anti-flash no index.html); dark é o default e mantém o visual original do app. =========================================================================== */ html[data-bs-theme="dark"] { color-scheme: dark; /* Bootstrap: cor de marca sobrescrita via variável nativa, não trocada. */ --bs-primary: #5b5ee6; --bs-primary-rgb: 91, 94, 230; --bs-body-bg: #101318; --bs-body-color: #e8eaf1; --bs-tertiary-bg: #252d38; --bs-border-color: rgba(255, 255, 255, .10); --bs-emphasis-color: #fff; --bs-secondary-color: #98a2b3; /* Tokens do app */ --app-bg: #101318; --app-content: #131922; --app-surface: #1c2430; --app-surface-2: #242e3c; --app-sidebar: #10151e; --app-topbar: #171e28; --app-border: #303b4a; --app-border-soft: rgba(255, 255, 255, .06); --app-border-strong: rgba(255, 255, 255, .20); --app-text: #e8eaf1; /* Corpo de texto do markdown: um passo abaixo do texto normal, para o negrito (que é --app-ink) ter de quem se destacar. Com os dois em quase-branco, **negrito** era indistinguível do resto. */ --app-text-soft: #c3cbdc; --app-text-muted: #a3afc1; --app-text-faint: #8894aa; --app-ink: #fff; --app-accent: #5b5ee6; --app-accent-soft: #a5b4fc; --app-grad-1: #a5b4fc; --app-grad-2: #c084fc; --app-hover: rgba(255, 255, 255, .05); --app-hover-strong: rgba(255, 255, 255, .08); --app-field: rgba(255, 255, 255, .05); --app-code-inline: rgba(255, 255, 255, .12); --app-code-bg: rgba(0, 0, 0, .35); --app-scrim: #05060c; --app-tint-1: rgba(99, 102, 241, .06); --app-tint-2: rgba(139, 92, 246, .05); --app-sheen: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 55%); --app-shadow-card: 0 2px 4px #0000000d, 0 8px 24px -20px #00000066; --app-shadow-pop: 0 10px 30px -12px rgba(0, 0, 0, .6); --app-option-bg: #10131c; --app-scroll: rgba(255, 255, 255, .12); --app-scroll-hover: rgba(255, 255, 255, .22); /* Pílulas de status (Pedidos do robô e afins): fundo translúcido + texto pastel no escuro; no claro o texto escurece pra manter contraste. */ --pill-neutral-bg: rgba(255, 255, 255, .07); --pill-neutral-fg: #cbd5e1; --pill-green-bg: rgba(52, 211, 153, .14); --pill-green-fg: #6ee7b7; --pill-amber-bg: rgba(251, 191, 36, .14); --pill-amber-fg: #fcd34d; --pill-amber-fg-soft: #fde68a; --pill-red-bg: rgba(248, 113, 113, .14); --pill-red-fg: #fca5a5; /* Trilho de etapas do pedido. Precisa de token próprio porque é uma linha de 2px: a borda comum (--app-border) some nessa espessura, e o verde translúcido que funciona no escuro fica lavado sobre branco. */ --app-trilho: rgba(255, 255, 255, .16); --app-trilho-ok: #34d399; /* OPACO, não translúcido. É o verde a 18% já achatado contra --app-surface: mesma aparência, mas o trilho não atravessa a bola por dentro — com alpha, z-index não adianta, porque dá para ver através. */ --app-marco-ok-bg: #1a3b3a; } html[data-bs-theme="light"] { color-scheme: light; --bs-primary: #5b5ee6; --bs-primary-rgb: 91, 94, 230; --bs-body-bg: #f4f5f7; --bs-body-color: #1e2432; --bs-tertiary-bg: #f2f5f9; --bs-border-color: rgba(15, 23, 42, .12); --bs-emphasis-color: #17202c; --bs-secondary-color: #5b6675; /* Claro com hierarquia: fundo levemente frio, cartão branco COM elevação e borda visível — sem isso tudo virava um bloco cinza só. */ --app-bg: #f4f5f7; --app-content: #f4f5f7; --app-surface: #ffffff; --app-surface-2: #f8f9fa; --app-sidebar: #101b2d; --app-topbar: #ffffff; --app-border: #dfe3e8; --app-border-soft: #eceef1; --app-border-strong: #bec5ce; --app-text: #202630; --app-text-soft: #404a59; --app-text-muted: #566170; --app-text-faint: #5b6675; --app-ink: #17202c; --app-accent: #5b5ee6; --app-accent-soft: #4053a4; /* a5b4fc é ilegível sobre branco */ --app-grad-1: #4053a4; --app-grad-2: #9333ea; --app-hover: rgba(15, 23, 42, .045); --app-hover-strong: rgba(15, 23, 42, .07); --app-field: #ffffff; --app-code-inline: rgba(15, 23, 42, .08); --app-code-bg: rgba(15, 23, 42, .05); --app-scrim: #0f172a; /* Os tints são o que tira o claro do "cinza chapado": o mesmo wash indigo que o escuro tem, só que sobre branco precisa de mais opacidade pra aparecer. */ --app-tint-1: rgba(64, 83, 164, .065); --app-tint-2: rgba(64, 83, 164, .025); --app-sheen: linear-gradient(transparent, transparent); /* Sombra difusa e comprida no lugar de borda dura: é ela que separa cartão de fundo no claro — a borda ficou quase invisível de propósito. */ /* Elevação um pouco mais presente: é ela que separa o cartão do fundo no claro (no escuro esse papel é do contraste de cor). */ --app-shadow-card: 0 1px 3px rgba(24, 42, 70, .04), 0 5px 16px -10px rgba(24, 42, 70, .14); --app-shadow-pop: 0 18px 54px -14px rgba(23, 39, 64, .24), 0 2px 8px rgba(23, 39, 64, .06); --app-option-bg: #ffffff; --app-scroll: rgba(15, 23, 42, .18); --app-scroll-hover: rgba(15, 23, 42, .30); --pill-neutral-bg: rgba(15, 23, 42, .07); --pill-neutral-fg: #334155; --pill-green-bg: rgba(16, 185, 129, .12); --pill-green-fg: #047857; --pill-amber-bg: rgba(217, 119, 6, .12); --pill-amber-fg: #92400e; --pill-amber-fg-soft: #b45309; --pill-red-bg: rgba(220, 38, 38, .10); --pill-red-fg: #b91c1c; /* Bem mais opaco que no escuro: 2px de linha sobre branco precisa disso para existir, e o verde desce para o tom 600, que é o legível sobre claro. */ --app-trilho: rgba(15, 23, 42, .16); --app-trilho-ok: #059669; /* Mesmo motivo do escuro: o verde a 14% achatado contra o branco. */ --app-marco-ok-bg: #dcf0ea; } html, body, #root { height: 100%; } body { background: var(--app-bg); color: var(--app-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } /* Troca de tema com transição suave — a classe é posta pelo themeStore só durante o toggle (~260ms); transition permanente causava jank em charts. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important; } /* Acessibilidade + polish: anel de foco só para navegação por teclado. Campos de texto ficam de fora — eles têm o próprio realce de borda no foco. */ :focus-visible:not(input):not(textarea):not(select) { outline: 2px solid rgba(129, 140, 248, .55); outline-offset: 2px; } input:focus, textarea:focus, select:focus { outline: none; } ::selection { background: rgba(99, 102, 241, .35); } /* SEM @layer aqui de propósito: regra de cascata do CSS diz que uma declaração sem layer SEMPRE ganha de uma com layer, não importa a especificidade — um @layer components{} nessas classes fazia .btn.btn-primary (specificity 0,1,0) perder pro reset de