/* =============================================================
Tema iComanda Brand — proposta de paleta
-------------------------------------------------------------
Como usar (apenas no preview por enquanto):
Esta folha NÃO altera o styles.css original — só sobrescreve
tokens via cascade. Se você gostar do resultado, a migração
final é mover este :root para o styles.css e remover o
prefixo .tema-icomanda dos seletores compostos.
============================================================= */
/* ---------- Tokens — tema claro ---------- */
:root.tema-icomanda {
--bg-primary: #f1f6fe;
--bg-elevated: #ffffff;
--bg-secondary: #e2edfe;
--bg-strong: #ccdcf8;
--bg-overlay: rgba(20, 22, 61, 0.42);
--border: #dcdfee;
--border-strong: rgba(46, 49, 146, 0.18);
--text-primary: #14163d;
--text-secondary: #5b5f87;
--text-muted: #9498b8;
--primary: #2e3192;
--primary-strong: #1f2270;
--secondary: #4f52b5;
--accent: #ffd600;
--accent-soft: #fff3b0;
/* Aliases para tokens órfãos usados pelos CSS de implantação. */
--color-primary: #2e3192;
--color-primary-strong: #1f2270;
--success: #2bb673;
--warning: #e89b0a;
--error: #e5484d;
--info: #4f52b5;
--shadow-soft: 0 22px 60px rgba(46, 49, 146, 0.14);
--shadow-card: 0 12px 34px rgba(20, 22, 61, 0.08);
--shadow-hover: 0 16px 34px rgba(46, 49, 146, 0.18);
}
/* ---------- Tokens — tema escuro ---------- */
:root.tema-icomanda[data-theme="dark"] {
--bg-primary: #0f1130;
--bg-elevated: #1a1d4a;
--bg-secondary: #161936;
--bg-strong: #252a5e;
--bg-overlay: rgba(5, 6, 18, 0.64);
--border: rgba(138, 141, 224, 0.18);
--border-strong: rgba(255, 214, 0, 0.20);
--text-primary: #ecedfa;
--text-secondary: #a0a3c8;
--text-muted: #6b6f95;
--primary: #8a8de0;
--secondary: #a5a8e8;
--accent: #ffd600;
--color-primary: #8a8de0;
--color-primary-strong: #a5a8e8;
--shadow-soft: 0 20px 56px rgba(0, 0, 0, 0.40);
--shadow-card: 0 10px 26px rgba(0, 0, 0, 0.32);
--shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.40);
}
/* ---------- Overrides para gradientes/cores hardcoded ---------- */
/* Body — blobs azuis (sem amarelo, evita o tom rosado na mistura com bg azul-claro) */
.tema-icomanda body {
background:
radial-gradient(circle at top left, rgba(46, 49, 146, 0.06), transparent 28%),
radial-gradient(circle at top right, rgba(46, 49, 146, 0.14), transparent 22%),
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 24%),
var(--bg-primary);
}
/* Page-shell — bolhas decorativas atrás do conteúdo */
.tema-icomanda .page-shell::before {
background: rgba(46, 49, 146, 0.08);
}
.tema-icomanda .page-shell::after {
background: rgba(46, 49, 146, 0.10);
}
/* Sidebar — overlay translúcido */
.tema-icomanda .sidebar {
background: rgba(255, 255, 255, 0.62);
}
.tema-icomanda[data-theme="dark"] .sidebar {
background: rgba(26, 29, 74, 0.78);
}
/* Foco / outline */
.tema-icomanda button:focus-visible,
.tema-icomanda a:focus-visible,
.tema-icomanda input:focus-visible,
.tema-icomanda select:focus-visible,
.tema-icomanda textarea:focus-visible {
outline-color: rgba(46, 49, 146, 0.35);
}
/* Auth hero — gradiente principal da tela de login */
.tema-icomanda .auth-hero {
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
radial-gradient(circle at 88% 12%, rgba(255, 214, 0, 0.22), transparent 32%),
linear-gradient(160deg, #2e3192 0%, #4f52b5 55%, #6a6cd0 100%);
}
/* Topbar translúcida — viés índigo em vez de turquesa */
.tema-icomanda .topbar {
border-bottom-color: rgba(220, 223, 238, 0.7);
background: rgba(245, 246, 251, 0.78);
}
.tema-icomanda[data-theme="dark"] .topbar {
background: rgba(15, 17, 48, 0.82);
border-bottom-color: rgba(138, 141, 224, 0.18);
}
/* Itens da sidebar — harmonizados com os checkboxes/inputs (mesmo --bg-secondary) */
.tema-icomanda .sidebar-link:hover,
.tema-icomanda .mobile-nav-link:hover {
background: var(--bg-secondary);
}
.tema-icomanda .sidebar-link.is-active,
.tema-icomanda .mobile-nav-link.is-active {
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-strong));
box-shadow: inset 3px 0 0 0 var(--accent);
font-weight: 600;
}
/* Badge "Dev" ao lado de itens em desenvolvimento */
.tema-icomanda .nav-meta {
background: rgba(46, 49, 146, 0.12);
color: var(--primary);
}
/* =============================================================
Utilitários extras (não conflitam com o styles.css)
Use estas classes para aproveitar o amarelo iComanda.
============================================================= */
/* Botão com acento amarelo — para 1 CTA herói por tela */
.tema-icomanda .button-accent {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.25rem;
border: none;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.92rem;
color: #14163d;
background: linear-gradient(135deg, #ffd600 0%, #ffc400 100%);
box-shadow: 0 12px 24px rgba(255, 214, 0, 0.35);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.tema-icomanda .button-accent:hover {
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(255, 214, 0, 0.45);
}
/* Card "premium" / KPI hero — gradiente azul → amarelo */
.tema-icomanda .kpi-hero {
position: relative;
overflow: hidden;
padding: 1.75rem;
border-radius: var(--radius-lg);
color: #fff;
background:
radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18), transparent 35%),
linear-gradient(135deg, #2e3192 0%, #4f52b5 60%, #ffd600 130%);
box-shadow: 0 20px 50px rgba(46, 49, 146, 0.28);
}
.tema-icomanda .kpi-hero strong {
display: block;
font-size: 2rem;
letter-spacing: -0.02em;
margin-bottom: 0.25rem;
}
.tema-icomanda .kpi-hero span {
color: rgba(255, 255, 255, 0.82);
font-size: 0.88rem;
}
/* Badge / chip amarelo (uso pontual: "Novo", "Premium") */
.tema-icomanda .chip-accent {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b4f00;
background: var(--accent-soft);
border: 1px solid rgba(255, 214, 0, 0.4);
}