/* ============================================================
DESIGN SYSTEM MO — componentes para app de gestão
FONTE ÚNICA. Documentação: docs/design-system-mo.md
Depende de: ds/tokens/*.css (importe os tokens antes deste)
------------------------------------------------------------
ORIGEM: Claude Design, projeto "Site da Moderna".
Este arquivo porta do bundle SÓ o que faz sentido dentro de um
app de gestão. Cada bloco diz de onde veio.
O que ficou de fora, de propósito, e por quê:
· hero, vídeo de fundo, cartões flutuantes de estatística
· transição de triângulos entre páginas
· pattern de triângulos em escala de peça (fica em 0.06)
· banner e popup de eventos, modal do iFood
São elementos de peça pública: foram desenhados para vender, e
numa tela de trabalho competem com o dado. O pattern e o tema
Açaí continuam disponíveis via token, para quando a tela for
de vitrine.
Prefixo `mo-` em tudo, para não colidir com classe existente
de app nenhum.
============================================================ */
/* ── POR QUE TUDO ISTO ESTA EM @layer components ──────────────
Este arquivo entra por DEPOIS do bundle do Tailwind. Sem a
camada, `.mo-btn-secundario { background: ... }` venceria uma
utilitaria `bg-primary` posta no elemento — e o componente passaria
a mandar na cor, que e o contrario do esperado.
Descoberto no PCP em 02/09/2026: o botao da aba ativa do login, que
e `.mo-btn-secundario` + `bg-primary`, ficou branco em vez de
vermelho. Dentro da camada `components` o Tailwind poe as
utilitarias depois, e elas voltam a vencer.
============================================================ */
@layer components {
/* ── BOTÕES ───────────────────────────────────────────────────
Verbatim de .btn-shop (l.489) e .btn-submit (l.1389): pílula,
caixa alta, peso 700, tracking .04em, sombra vermelha, e o
hover que sobe 2px. O secundário e o de perigo são derivados —
o site não precisava deles. */
.mo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border: none;
border-radius: var(--radius-pill);
font-family: inherit;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
min-height: 44px;
transition: transform var(--mo-dur-rapido), box-shadow var(--mo-dur-rapido),
background var(--mo-dur-rapido), border-color var(--mo-dur-rapido);
}
.mo-btn:hover { transform: translateY(-2px); }
.mo-btn:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.mo-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.mo-btn-primario {
background: var(--t-accent);
color: #fff;
box-shadow: var(--shadow-red-sm);
}
.mo-btn-primario:hover { box-shadow: var(--shadow-red-md); }
/* Derivado: o secundário do site era ghost sobre foto e não
funciona sobre papel. Este é o par sóbrio. */
.mo-btn-secundario {
background: var(--t-superficie);
color: var(--t-fg);
border: 1.5px solid var(--t-borda);
}
.mo-btn-secundario:hover { border-color: var(--t-accent); color: var(--t-accent); }
/* Derivado: ação destrutiva. Usa o vermelho profundo, não o da
marca — a marca é conquista, não perda. */
.mo-btn-perigo { background: var(--mo-red-deep); color: #fff; }
.mo-btn-bloco { width: 100%; justify-content: center; padding: 16px 28px; }
/* Chão de fábrica e tablet de loja: alvo de 48px em vez de 44px.
O token já existia (--alvo-toque-fabrica); faltava o modificador. */
.mo-btn-grande { min-height: var(--alvo-toque-fabrica); padding: 14px 26px; font-size: 15px; }
.mo-btn-pequeno { min-height: 36px; padding: 8px 16px; font-size: 12px; }
/* ── CARTÃO ───────────────────────────────────────────────────
De .feature-card (l.1081). Container SIMPLES de propósito: fundo,
borda, raio e a sombra quente, com padding próprio. Nada de
display:flex aqui — ele é usado em centenas de lugares que põem
conteúdo direto dentro, e impor um contexto de flex mudaria o
layout de todos eles. A variante de mídia, que precisa da coluna,
é .mo-cartao-midia. */
.mo-cartao {
background: var(--t-superficie);
border: 1px solid var(--t-borda);
border-radius: var(--radius-md);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.mo-cartao-raso { padding: 14px; }
.mo-cartao-solto { padding: 28px; }
/* Variante de mídia: imagem em cima, corpo embaixo. É a do bundle. */
.mo-cartao-midia {
background: var(--t-superficie);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
padding: 0;
}
.mo-cartao-midia > .corpo { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.mo-cartao-clicavel {
cursor: pointer;
text-align: left;
transition: transform var(--mo-dur-base), box-shadow var(--mo-dur-base);
}
.mo-cartao-clicavel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mo-cartao-clicavel:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.mo-cartao h3, .mo-cartao-midia h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 600;
margin: 0 0 8px;
color: var(--t-fg);
}
/* A seta que anda no hover — assinatura do bundle (l.1136). */
.mo-seta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--t-accent);
}
.mo-seta svg { transition: transform var(--mo-dur-rapido); }
.mo-cartao-clicavel:hover .mo-seta svg { transform: translateX(4px); }
/* ── FORMULÁRIO ───────────────────────────────────────────────
Verbatim de .form-card e .form-row (l.1335–1380): rótulo em caixa
alta 12px com opacidade .75, campo com borda de 1.5px, fundo papel
que vira branco no foco e a borda assumindo o vermelho da marca.
Duas formas de usar, porque a suíte tem as duas:
.mo-input — direto no /