/* ============================================================================
* DESIGN SYSTEM — FUNDAÇÃO PORTÁVEL (colável)
* ----------------------------------------------------------------------------
* Identidade visual reutilizável, extraída da ferramenta "Gerador de Encarte"
* (fonte da verdade: frontend/shared/design.css).
*
* O QUE ESTE ARQUIVO CONTÉM (de propósito, enxuto):
* • TOKENS — cores (claro + escuro), tipografia, espaçamento, raios,
* sombras, transições, z-index. São só variáveis: inofensivas.
* • ÍCONES — a classe .icone + a REGRA "sem emojis" (SVG inline).
* • COMPONENTES — botões, campos (input/select/textarea + opções), toasts,
* badges e tabela. Todos são OPT-IN: só afetam quem tem a classe.
*
* O QUE ESTE ARQUIVO **NÃO** CONTÉM (e por quê):
* • NÃO há reset global (`* { margin:0; padding:0 }`) nem estilo em elementos
* nus (body, h1, p, a…). Era isso que "bugava o espaçamento" ao colar o DS
* numa ferramenta já existente — o reset zerava as margens dela inteira.
* • NÃO há layout de app (app-shell/sidebar), login, modal, card nem skeleton.
* Layout é decisão de cada ferramenta; aqui só entra a IDENTIDADE.
*
* COMO USAR NUMA FERRAMENTA NOVA:
* 1. Copie este arquivo para `frontend/shared/design.css`.
* 2. No (ou raiz) aplique a família e a cor de texto:
* body { font-family: var(--fam-sans); color: var(--c-texto);
* background: var(--c-bg); }
* 3. Marque o tema no : data-tema="claro" | data-tema="escuro".
* 4. Forneça a fonte Geist (self-host em prod; ver nota TIPOGRAFIA).
*
* REGRA DE OURO: valor bruto (cor, espaço, raio, tempo) só existe nos TOKENS.
* Todo o resto consome via var(). Não invente número solto.
* ========================================================================== */
/* ============================================================================
* 1. TOKENS — tema claro (raiz)
* ========================================================================== */
:root {
/* ---------- Tipografia ----------
* Família Geist (Sans + Mono). Em produção: self-host em /fonts/*.woff2 via
* @font-face (eixo variável). Fora de produção dá para carregar do Google
* Fonts. As pilhas de fallback abaixo garantem legibilidade sem a Geist. */
--fam-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
system-ui, sans-serif;
--fam-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
'Liberation Mono', monospace;
--fs-xs: 0.75rem; /* 12px — auxiliar */
--fs-sm: 0.875rem; /* 14px — corpo secundário */
--fs-base: 1rem; /* 16px — corpo */
--fs-md: 1.125rem; /* 18px — destaque */
--fs-lg: 1.25rem; /* 20px — subtítulo */
--fs-xl: 1.5rem; /* 24px — título de página */
--fs-2xl: 1.875rem; /* 30px — título grande */
--lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.02em;
/* ---------- Cores: neutros (tema claro) ---------- */
--c-bg: #ffffff; /* fundo base */
--c-bg-elev: #fafafa; /* superfície elevada (card, modal, toast) */
--c-bg-muted: #f4f4f5; /* fundo sutil (campo, cabeçalho de tabela) */
--c-bg-hover: #f0f0f1; /* hover de linha/superfície */
--c-borda: #e4e4e7; /* borda padrão */
--c-borda-forte: #d4d4d8; /* borda de ênfase (botão secundário) */
--c-texto: #18181b; /* texto primário */
--c-texto-2: #52525b; /* texto secundário */
--c-texto-3: #a1a1aa; /* texto terciário / placeholder */
/* ---------- Cores: acento (ÚNICO acento do sistema) ----------
* Terracota. Um sistema, um acento. Para outra marca, troque SÓ estes 6
* valores (e os 6 do tema escuro) — o resto do DS acompanha. */
--c-acento: #e87a3e;
--c-acento-hover: #d96a2c;
--c-acento-ativo: #c45a20;
--c-acento-bg: #fef3ec; /* fundo tênue de acento (badge/realce) */
--c-acento-borda: #f4cdb0; /* borda de acento / anel de foco */
--c-acento-texto: #ffffff; /* texto sobre fundo de acento */
/* ---------- Cores: semânticas (uso pontual, contido) ---------- */
--c-sucesso: #16a34a; --c-sucesso-bg: #f0fdf4;
--c-aviso: #d97706; --c-aviso-bg: #fffbeb;
--c-erro: #dc2626; --c-erro-bg: #fef2f2;
/* ---------- Espaçamento (base 4px) ----------
* (Tokens — não aplicam espaço em nada sozinhos; os componentes os consomem.) */
--esp-1: 0.25rem; /* 4px */
--esp-2: 0.5rem; /* 8px */
--esp-3: 0.75rem; /* 12px */
--esp-4: 1rem; /* 16px */
--esp-5: 1.25rem; /* 20px */
--esp-6: 1.5rem; /* 24px */
--esp-8: 2rem; /* 32px */
--esp-10: 2.5rem; /* 40px */
--esp-12: 3rem; /* 48px */
--esp-16: 4rem; /* 64px */
/* ---------- Raios (arredondamento das bordas — cantos sutis) ---------- */
--raio-sm: 3px;
--raio-md: 4px;
--raio-lg: 6px;
--raio-xl: 8px;
--raio-full: 9999px; /* pílula (badge) */
/* ---------- Sombras (tema claro — discretas) ---------- */
--sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--sombra-md: 0 2px 4px rgba(0, 0, 0, 0.05),
0 1px 2px rgba(0, 0, 0, 0.03);
--sombra-lg: 0 8px 16px rgba(0, 0, 0, 0.06),
0 2px 4px rgba(0, 0, 0, 0.04);
--sombra-foco: 0 0 0 3px var(--c-acento-borda); /* anel de acessibilidade */
/* ---------- Transições ---------- */
--t-rapida: 120ms ease-out;
--t-padrao: 180ms ease-out;
--t-lenta: 240ms ease-out;
/* ---------- Z-index ---------- */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
--z-toast: 1100;
--z-tooltip: 1200;
}
/* ---------- TOKENS — tema escuro (override) ----------
* Mesmas variáveis reescritas. O acento clareia (#f08552) e o texto sobre o
* acento fica ESCURO para preservar contraste. Aplique com data-tema="escuro"
* no . */
[data-tema="escuro"] {
--c-bg: #0a0a0b;
--c-bg-elev: #141416;
--c-bg-muted: #1c1c1f;
--c-bg-hover: #232327;
--c-borda: #2a2a2e;
--c-borda-forte: #3f3f46;
--c-texto: #fafafa;
--c-texto-2: #a1a1aa;
--c-texto-3: #71717a;
--c-acento: #f08552;
--c-acento-hover: #e87a3e;
--c-acento-ativo: #d96a2c;
--c-acento-bg: #2a1810;
--c-acento-borda: #5a3a25;
--c-acento-texto: #0a0a0b; /* preto sobre laranja claro = melhor contraste */
--c-sucesso: #22c55e; --c-sucesso-bg: #0a1f12;
--c-aviso: #f59e0b; --c-aviso-bg: #1f1608;
--c-erro: #ef4444; --c-erro-bg: #1f0d0d;
/* Sombras mais opacas para serem perceptíveis em fundo escuro */
--sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
--sombra-md: 0 2px 4px rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.25);
--sombra-lg: 0 8px 16px rgba(0, 0, 0, 0.45),
0 2px 4px rgba(0, 0, 0, 0.30);
}
/* ============================================================================
* 2. ÍCONES — a regra "sem emojis"
* ----------------------------------------------------------------------------
* A interface NÃO usa emojis. Todo ícone é um SVG inline no estilo
* Feather/Lucide, padronizado:
*
* viewBox="0 0 24 24" fill="none" stroke="currentColor"
* stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
*
* `stroke="currentColor"` faz o ícone herdar a cor do texto — vira theme-aware
* sozinho (claro/escuro, estado ativo, hover). Sem CDN, sem icon-font: combina
* com CSP estrita. Fonte dos traçados: lucide.dev (ISC) — copie o SVG e ajuste
* stroke-width para 1.75.
*
*
*
*
*
* Tamanho padrão 20px; modificadores --sm (16px) e --lg (24px).
* ========================================================================== */
.icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: currentColor;
}
.icone svg { display: block; width: 100%; height: 100%; }
.icone--sm { width: 1rem; height: 1rem; }
.icone--lg { width: 1.5rem; height: 1.5rem; }
/* ============================================================================
* 3. COMPONENTES
* ----------------------------------------------------------------------------
* Todos assumem box-sizing: border-box (declarado localmente para não depender
* de um reset global — é isso que torna o DS colável sem quebrar a ferramenta).
* ========================================================================== */
.btn, .input, .select, .textarea,
.badge, .toast, .tabela, .tabela th, .tabela td {
box-sizing: border-box;
}
/* ---------- Botões ----------
*
*
*
*
*
*
*
*
* Hierarquia: só UM primário (laranja) por tela. Peso 500, altura padrão 34px. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
padding: var(--esp-1) var(--esp-3);
height: 2.125rem; /* 34px */
font-family: inherit;
font-size: var(--fs-base);
font-weight: 500;
line-height: 1.2;
color: var(--c-texto);
background: none;
border: 1px solid transparent;
border-radius: var(--raio-md);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
background var(--t-rapida),
border-color var(--t-rapida),
color var(--t-rapida),
box-shadow var(--t-rapida);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--sombra-foco);
}
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-primario {
background: var(--c-acento);
color: var(--c-acento-texto);
}
.btn-primario:hover:not(:disabled) { background: var(--c-acento-hover); }
.btn-primario:active:not(:disabled) { background: var(--c-acento-ativo); }
.btn-secundario {
background: var(--c-bg);
color: var(--c-texto);
border-color: var(--c-borda-forte);
}
.btn-secundario:hover:not(:disabled) { background: var(--c-bg-hover); }
.btn-discreto {
background: transparent;
color: var(--c-texto-2);
}
.btn-discreto:hover:not(:disabled) {
background: var(--c-bg-hover);
color: var(--c-texto);
}
.btn-perigo {
background: var(--c-erro);
color: #ffffff;
}
.btn-perigo:hover:not(:disabled) {
background: color-mix(in srgb, var(--c-erro) 88%, black);
}
/* Tamanhos */
.btn-pequeno {
height: 1.625rem; /* 26px */
padding: var(--esp-1) var(--esp-2);
font-size: var(--fs-sm);
border-radius: var(--raio-sm);
}
.btn-grande {
height: 2.625rem; /* 42px */
padding: var(--esp-2) var(--esp-4);
font-size: var(--fs-md);
}
.btn-icone {
padding: var(--esp-1);
aspect-ratio: 1; /* quadrado */
width: 2.125rem;
}
.btn-icone svg { width: 16px; height: 16px; }
.btn-pequeno.btn-icone { width: 1.625rem; }
.btn-grande.btn-icone { width: 2.625rem; }
.btn-bloco { display: flex; width: 100%; }
/* ---------- Campos: input / select / textarea ----------
*
*
*
* Estado inválido: aria-invalid="true" no elemento.
*
* Cor do campo: fundo sutil (--c-bg-muted), borda --c-borda, foco em laranja
* com anel de respiro (--sombra-foco). */
.input, .select, .textarea {
display: block;
width: 100%;
padding: var(--esp-2) var(--esp-3);
height: 2.5rem; /* 40px */
font-family: inherit;
font-size: var(--fs-base);
color: var(--c-texto);
background: var(--c-bg-muted);
border: 1px solid var(--c-borda);
border-radius: var(--raio-md);
transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-texto-3); }
.input:hover:not(:disabled):not(:focus),
.select:hover:not(:disabled):not(:focus),
.textarea:hover:not(:disabled):not(:focus) { border-color: var(--c-borda-forte); }
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--c-acento);
box-shadow: var(--sombra-foco);
}
.input:disabled,
.select:disabled,
.textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-erro); }
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-erro) 25%, transparent);
}
.textarea {
min-height: 6rem;
height: auto;
resize: vertical;
line-height: var(--lh-normal);
padding: var(--esp-3);
}
/* Seta do select desenhada como SVG data-URI (sem imagem externa). */
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--esp-3) center;
background-size: 12px;
padding-right: var(--esp-8);
cursor: pointer;
}
[data-tema="escuro"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Rótulo e campo (agrupador) ----------
*
*
*
*
[opcional]
*
Dica de preenchimento.
[opcional]
*
Mensagem
* data-tipo: info | sucesso | aviso | erro (muda só a barra lateral esquerda).
* Posição fixa no rodapé central; anima opacidade + deslize. */
.toast {
position: fixed;
left: 50%;
bottom: var(--esp-6);
transform: translateX(-50%) translateY(12px);
background: var(--c-bg-elev);
color: var(--c-texto);
border: 1px solid var(--c-borda);
border-left: 3px solid var(--c-texto-3);
border-radius: var(--raio-md);
padding: var(--esp-3) var(--esp-4);
box-shadow: var(--sombra-lg);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-padrao), transform var(--t-padrao);
max-width: 80vw;
z-index: var(--z-toast);
font-size: var(--fs-sm);
}
.toast--visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-tipo="info"] { border-left-color: var(--c-acento); }
.toast[data-tipo="sucesso"] { border-left-color: var(--c-sucesso); }
.toast[data-tipo="aviso"] { border-left-color: var(--c-aviso); }
.toast[data-tipo="erro"] { border-left-color: var(--c-erro); }
/* ---------- Badges ----------
* Padrão
* Ativo
* OK
* Atenção
* Falhou */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--esp-2);
font-size: var(--fs-xs);
font-weight: 500;
line-height: 1.4;
border-radius: var(--raio-full);
background: var(--c-bg-muted);
color: var(--c-texto-2);
border: 1px solid var(--c-borda);
white-space: nowrap;
}
.badge-acento {
background: var(--c-acento-bg);
color: var(--c-acento-ativo);
border-color: var(--c-acento-borda);
}
.badge-sucesso { background: var(--c-sucesso-bg); color: var(--c-sucesso); border-color: transparent; }
.badge-aviso { background: var(--c-aviso-bg); color: var(--c-aviso); border-color: transparent; }
.badge-erro { background: var(--c-erro-bg); color: var(--c-erro); border-color: transparent; }
/* ---------- Tabela ----------
* (Reflete a tabela ATUAL da ferramenta: frontend/shared/design.css.)
*
* | Nome | Preço |
|---|
* | Banana | R$ 4,99 |
*
* Cabeçalho em maiúsculas, fundo sutil; hover de linha; --zebra (linhas
* alternadas), --sticky (cabeçalho fixo), td.num (coluna numérica mono). */
.tabela {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.tabela th,
.tabela td {
padding: var(--esp-3);
text-align: left;
border-bottom: 1px solid var(--c-borda);
}
.tabela th {
font-weight: 600;
color: var(--c-texto-2);
background: var(--c-bg-muted);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.tabela tbody tr { transition: background var(--t-rapida); }
.tabela tbody tr:hover { background: var(--c-bg-hover); }
.tabela--zebra tbody tr:nth-child(odd) { background: var(--c-bg-elev); }
.tabela--zebra tbody tr:nth-child(odd):hover { background: var(--c-bg-hover); }
.tabela--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); }
.tabela td.num { /* colunas numéricas */
font-family: var(--fam-mono);
text-align: right;
font-variant-numeric: tabular-nums;
}