/* ============================================================
AJUDA // DESIGN SYSTEM · ajuda-ds.css · v2
Identidade visual da Ajuda Ecommerce.
FONTE ÚNICA (hospedado no servidor — sempre puxe daqui):
Comportamentos (máscaras, abas, navbar, tema):
Fontes (Google Fonts):
NÃO copie este arquivo para dentro dos apps. Sempre referencie a URL acima,
para que toda mudança aqui no servidor reflita em todos os apps de uma vez.
------------------------------------------------------------
O QUE MUDOU NA v2
1. Tema claro e escuro. Os tokens de superfície e de texto viram dois
conjuntos; o resto do arquivo não sabe qual está no ar.
força escuro
força claro
sem o atributo segue o sistema operacional
2. Marca e tema separados. As escalas de cor (--aj-lime-*, --aj-blue-*)
são hues fixos da marca e não mudam nunca. Quem muda são os tokens
semânticos: --aj-bg, --aj-surface, --aj-text, --aj-heading, --aj-line.
Regra prática: para pintar texto e fundo, use os semânticos. Use um
hue cru só quando a cor for o assunto (o verde de um selo, o azul de
um gráfico).
3. Cantos e bordas. O raio subiu de 2–4px para 6–14px, e a borda sólida
de 1.5px em tudo deu lugar a 1px + sombra em camadas.
4. Tipografia. Os títulos passam para a display (Space Grotesk). A mono
continua sendo a assinatura, agora no papel dela: rótulos, botões,
selos, cabeçalho de tabela e números.
============================================================ */
/* ============================================================
1. MARCA — hues fixos, iguais nos dois temas
============================================================ */
:root{
/* — cores núcleo (extraídas do logo) — */
--aj-lime: #A0E800;
--aj-blue: #004070;
--aj-white: #F8F8F8;
/* — verde: escala — */
--aj-lime-900: #3F5C00;
--aj-lime-700: #6FA200;
--aj-lime-600: #84C000;
--aj-lime-500: #A0E800;
--aj-lime-300: #C6F25C;
--aj-lime-100: #ECFBC4;
--aj-lime-50: #F6FDE6;
/* — azul: escala — */
--aj-blue-950: #001B31;
--aj-blue-900: #002B4D;
--aj-blue-800: #003660;
--aj-blue-700: #004070;
--aj-blue-500: #1A6AA8;
--aj-blue-300: #7FA8C7;
--aj-blue-100: #D6E4EF;
--aj-blue-50: #EEF4F9;
}
/* ============================================================
2. TEMA CLARO — o padrão
============================================================ */
:root{
color-scheme: light;
/* — superfícies — */
--aj-bg: #F4F6F8; /* fundo da página */
--aj-surface: #FFFFFF; /* cartão, campo, barra */
--aj-surface-2: #EDF1F4; /* faixa dentro do cartão */
--aj-surface-3: #E3E9EE; /* trilho, barra de progresso */
/* — texto — */
--aj-heading: #004070; /* títulos */
--aj-ink: #0E1B26; /* texto forte */
--aj-text: #3C4D5A; /* corpo */
--aj-text-muted: #647585; /* apoio, legenda */
--aj-text-faint: #8B9BA8; /* placeholder, desabilitado */
--aj-on-accent: #002B4D; /* texto sobre o verde */
--aj-on-solid: #FFFFFF; /* texto sobre o azul cheio */
/* — linhas — */
--aj-line: #E1E7EC; /* divisória padrão */
--aj-line-strong: #C9D4DC; /* contorno de campo */
--aj-border: 1px solid var(--aj-line);
/* — destaque — */
--aj-accent: #A0E800;
--aj-accent-hover: #8FD400;
--aj-accent-soft: #ECFBC4;
--aj-accent-line: #C6F25C;
--aj-accent-text: #55801F; /* verde que passa em texto pequeno */
--aj-solid: #004070; /* realce azul cheio */
--aj-solid-hover: #003660;
--aj-solid-soft: #EEF4F9;
--aj-solid-text: #004070;
/* — semânticos — */
--aj-success: #1F8A4C;
--aj-success-soft: #E6F4EC;
--aj-warning: #A97800;
--aj-warning-soft: #FBF2DA;
--aj-danger: #C93B3B;
--aj-danger-soft: #FBEBEB;
--aj-info: #1A6AA8;
--aj-info-soft: #EAF2F9;
/* — casca do painel — */
--aj-side-bg: #FFFFFF;
--aj-side-line: #E1E7EC;
--aj-side-text: #4A5B69;
--aj-side-text-hi: #002B4D;
--aj-side-hover: #EDF1F4;
--aj-side-active: #F4FCE2;
--aj-side-head: #8B9BA8;
/* — sombras — */
--aj-shadow-xs: 0 1px 2px rgba(14,27,38,.05);
--aj-shadow-sm: 0 1px 3px rgba(14,27,38,.07), 0 1px 2px rgba(14,27,38,.04);
--aj-shadow: 0 4px 14px rgba(14,27,38,.08), 0 1px 3px rgba(14,27,38,.05);
--aj-shadow-lg: 0 18px 44px rgba(14,27,38,.14), 0 4px 12px rgba(14,27,38,.07);
--aj-shadow-pop: 0 10px 30px rgba(14,27,38,.16);
/* — véu do modal — */
--aj-veil: rgba(0,43,77,.42);
/* — RETROCOMPATIBILIDADE
Nomes de neutro da v1 que os apps já usam por aí. Continuam
existindo e agora acompanham o tema, então tela antiga entra no
escuro sozinha. Em código novo, prefira os semânticos acima. — */
--aj-gray-700: var(--aj-text);
--aj-gray-500: var(--aj-text-muted);
--aj-gray-300: var(--aj-line-strong);
--aj-gray-200: var(--aj-line);
--aj-gray-100: var(--aj-line);
}
/* ============================================================
3. TEMA ESCURO
Escrito duas vezes de propósito. O @media atende quem nunca escolheu
nada — e o :not([data-theme="light"]) impede que ele atropele quem
escolheu claro. O [data-theme="dark"] atende quem clicou no botão,
inclusive num sistema configurado em claro.
============================================================ */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme: dark;
--aj-bg: #0A1219;
--aj-surface: #121D27;
--aj-surface-2: #1A2833;
--aj-surface-3: #23333F;
--aj-heading: #E8F1F8;
--aj-ink: #F2F7FB;
--aj-text: #B4C4D0;
--aj-text-muted: #8697A5;
--aj-text-faint: #64757F;
--aj-on-accent: #0A1219;
--aj-on-solid: #FFFFFF;
--aj-line: #22323F;
--aj-line-strong: #35485A;
--aj-border: 1px solid var(--aj-line);
--aj-accent: #A0E800;
--aj-accent-hover: #B4F32B;
--aj-accent-soft: #1E3009;
--aj-accent-line: #3F5C00;
--aj-accent-text: #BCEF5E;
--aj-solid: #1A6AA8;
--aj-solid-hover: #2680C4;
--aj-solid-soft: #10222F;
--aj-solid-text: #7FC0EE;
--aj-success: #46C07A;
--aj-success-soft: #10281B;
--aj-warning: #E0A800;
--aj-warning-soft: #2C2408;
--aj-danger: #F07070;
--aj-danger-soft: #2E1414;
--aj-info: #5AA8DE;
--aj-info-soft: #10222F;
--aj-side-bg: #0D161E;
--aj-side-line: #1D2B36;
--aj-side-text: #98A9B6;
--aj-side-text-hi: #F2F7FB;
--aj-side-hover: #17232D;
--aj-side-active: #1E3009;
--aj-side-head: #647585;
--aj-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
--aj-shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
--aj-shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
--aj-shadow-lg: 0 20px 48px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
--aj-shadow-pop: 0 12px 34px rgba(0,0,0,.55);
--aj-veil: rgba(3,8,13,.68);
}
}
:root[data-theme="dark"]{
color-scheme: dark;
--aj-bg: #0A1219;
--aj-surface: #121D27;
--aj-surface-2: #1A2833;
--aj-surface-3: #23333F;
--aj-heading: #E8F1F8;
--aj-ink: #F2F7FB;
--aj-text: #B4C4D0;
--aj-text-muted: #8697A5;
--aj-text-faint: #64757F;
--aj-on-accent: #0A1219;
--aj-on-solid: #FFFFFF;
--aj-line: #22323F;
--aj-line-strong: #35485A;
--aj-border: 1px solid var(--aj-line);
--aj-accent: #A0E800;
--aj-accent-hover: #B4F32B;
--aj-accent-soft: #1E3009;
--aj-accent-line: #3F5C00;
--aj-accent-text: #BCEF5E;
--aj-solid: #1A6AA8;
--aj-solid-hover: #2680C4;
--aj-solid-soft: #10222F;
--aj-solid-text: #7FC0EE;
--aj-success: #46C07A;
--aj-success-soft: #10281B;
--aj-warning: #E0A800;
--aj-warning-soft: #2C2408;
--aj-danger: #F07070;
--aj-danger-soft: #2E1414;
--aj-info: #5AA8DE;
--aj-info-soft: #10222F;
--aj-side-bg: #0D161E;
--aj-side-line: #1D2B36;
--aj-side-text: #98A9B6;
--aj-side-text-hi: #F2F7FB;
--aj-side-hover: #17232D;
--aj-side-active: #1E3009;
--aj-side-head: #647585;
--aj-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
--aj-shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
--aj-shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
--aj-shadow-lg: 0 20px 48px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
--aj-shadow-pop: 0 12px 34px rgba(0,0,0,.55);
--aj-veil: rgba(3,8,13,.68);
}
/* ============================================================
4. ESCALAS — iguais nos dois temas
============================================================ */
:root{
/* — famílias — */
--aj-font-mono: "PX Grotesk Mono","Space Mono",ui-monospace,monospace;
--aj-font-display: "PX Grotesk","Space Grotesk",system-ui,sans-serif;
--aj-font-body: "Space Grotesk",system-ui,sans-serif;
/* — tamanhos — */
--aj-text-xs: .75rem; /* 12 */
--aj-text-sm: .875rem; /* 14 */
--aj-text-base: 1rem; /* 16 */
--aj-text-md: 1.125rem; /* 18 */
--aj-text-lg: 1.375rem; /* 22 */
--aj-text-xl: 1.75rem; /* 28 */
--aj-text-2xl: 2.25rem; /* 36 */
--aj-text-3xl: 3rem; /* 48 */
--aj-w-light:300; --aj-w-regular:400; --aj-w-medium:500;
--aj-w-semibold:600; --aj-w-bold:700;
--aj-lh-tight:1.15; --aj-lh-snug:1.3; --aj-lh-normal:1.6; --aj-lh-relaxed:1.75;
--aj-ls-tight:-.02em; --aj-ls-normal:0; --aj-ls-wide:.04em; --aj-ls-mono:.1em;
/* — espaçamento (base 4px) — */
--aj-1:4px; --aj-2:8px; --aj-3:12px; --aj-4:16px; --aj-5:24px;
--aj-6:32px; --aj-7:48px; --aj-8:64px; --aj-9:96px;
/* — raios — */
--aj-r-sm:6px; --aj-r:10px; --aj-r-lg:14px; --aj-r-xl:20px; --aj-r-pill:999px;
/* — botões — */
--aj-btn-pad-sm: 7px 14px;
--aj-btn-pad-md: 10px 20px;
--aj-btn-pad-lg: 14px 28px;
--aj-btn-font-md: var(--aj-text-sm);
--aj-btn-font-lg: var(--aj-text-base);
--aj-btn-gap: 8px;
--aj-btn-radius: var(--aj-r);
--aj-btn-weight: var(--aj-w-bold);
--aj-btn-tracking:.01em;
/* — largura máxima do conteúdo do painel — */
--aj-measure: 1180px;
/* — movimento — */
--aj-ease: cubic-bezier(.2,.8,.3,1);
--aj-fast: .12s;
--aj-med: .2s;
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ============================================================
5. BASE
============================================================ */
.aj-body-bg,
body.aj{
background:var(--aj-bg);
color:var(--aj-text);
font-family:var(--aj-font-body);
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--aj-accent);color:var(--aj-on-accent)}
/* Barra de rolagem discreta, no tom do tema. */
@supports (scrollbar-color: auto){
:root{scrollbar-color:var(--aj-line-strong) transparent}
}
/* ============================================================
6. PATTERN // (textura assinatura)
.aj-pattern-- aplica o pattern como background tileável.
============================================================ */
:root{
--aj-pat-lime-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNBMEU4MDAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
--aj-pat-white-blue:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiMwMDQwNzAiLz48L3N2Zz4=");
--aj-pat-blue-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiMwMDQwNzAiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
--aj-pat-white-lime:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIHZpZXdCb3g9IjAgMCAzOC4zIDMzLjgiPjxyZWN0IHdpZHRoPSIzOC4zIiBoZWlnaHQ9IjMzLjgiIGZpbGw9IiNGOEY4RjgiLz48cGF0aCBkPSJNLTM4LjMwLDAuMDAgTC0zNi4yNiwwLjAwIEwtNDEuMDksMTYuODMgTC00My4xNCwxNi44MyBaIE0tMzEuODAsMC4wMCBMLTI5Ljc2LDAuMDAgTC0zNC41OSwxNi44MyBMLTM2LjY0LDE2LjgzIFogTTAuMDAsMC4wMCBMMi4wNCwwLjAwIEwtMi43OSwxNi44MyBMLTQuODQsMTYuODMgWiBNNi41MCwwLjAwIEw4LjU0LDAuMDAgTDMuNzEsMTYuODMgTDEuNjYsMTYuODMgWiBNMzguMzAsMC4wMCBMNDAuMzQsMC4wMCBMMzUuNTEsMTYuODMgTDMzLjQ2LDE2LjgzIFogTTQ0LjgwLDAuMDAgTDQ2Ljg0LDAuMDAgTDQyLjAxLDE2LjgzIEwzOS45NiwxNi44MyBaIE0tMjEuNDAsMTYuOTAgTC0xOS4zNiwxNi45MCBMLTI0LjE5LDMzLjczIEwtMjYuMjQsMzMuNzMgWiBNLTE0LjkwLDE2LjkwIEwtMTIuODYsMTYuOTAgTC0xNy42OSwzMy43MyBMLTE5Ljc0LDMzLjczIFogTTE2LjkwLDE2LjkwIEwxOC45NCwxNi45MCBMMTQuMTEsMzMuNzMgTDEyLjA2LDMzLjczIFogTTIzLjQwLDE2LjkwIEwyNS40NCwxNi45MCBMMjAuNjEsMzMuNzMgTDE4LjU2LDMzLjczIFogTTU1LjIwLDE2LjkwIEw1Ny4yNCwxNi45MCBMNTIuNDEsMzMuNzMgTDUwLjM2LDMzLjczIFogTTYxLjcwLDE2LjkwIEw2My43NCwxNi45MCBMNTguOTEsMzMuNzMgTDU2Ljg2LDMzLjczIFoiIGZpbGw9IiNBMEU4MDAiLz48L3N2Zz4=");
}
.aj-pattern{background-repeat:repeat;background-size:48px auto}
.aj-pattern--lime-blue{background-image:var(--aj-pat-lime-blue)}
.aj-pattern--white-blue{background-image:var(--aj-pat-white-blue)}
.aj-pattern--blue-lime{background-image:var(--aj-pat-blue-lime)}
.aj-pattern--white-lime{background-image:var(--aj-pat-white-lime)}
/* ============================================================
7. TIPOGRAFIA — classes canônicas (use nos apps)
Títulos na display. A mono ficou com os papéis curtos, que é onde
ela assina sem cansar: rótulo, botão, selo, número, cabeçalho de
tabela. Título grande em mono é o que dava cara de terminal.
============================================================ */
.aj-display{
font-family:var(--aj-font-display);font-size:var(--aj-text-3xl);
font-weight:var(--aj-w-bold);line-height:var(--aj-lh-tight);
letter-spacing:var(--aj-ls-tight);color:var(--aj-heading);
text-wrap:balance;
}
.aj-h1{
font-family:var(--aj-font-display);font-size:var(--aj-text-xl);
font-weight:var(--aj-w-bold);line-height:var(--aj-lh-tight);
letter-spacing:var(--aj-ls-tight);color:var(--aj-heading);
text-wrap:balance;
}
.aj-h2{
font-family:var(--aj-font-display);font-size:var(--aj-text-lg);
font-weight:var(--aj-w-bold);line-height:var(--aj-lh-snug);
letter-spacing:var(--aj-ls-tight);color:var(--aj-heading);
}
.aj-h3{
font-family:var(--aj-font-display);font-size:var(--aj-text-md);
font-weight:var(--aj-w-semibold);line-height:var(--aj-lh-snug);
letter-spacing:var(--aj-ls-normal);color:var(--aj-heading);
}
.aj-body{
font-family:var(--aj-font-body);font-size:var(--aj-text-base);
font-weight:var(--aj-w-regular);line-height:var(--aj-lh-normal);
color:var(--aj-text);
}
.aj-small{
font-family:var(--aj-font-body);font-size:var(--aj-text-sm);
font-weight:var(--aj-w-regular);line-height:var(--aj-lh-normal);
color:var(--aj-text-muted);
}
.aj-hint{
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);
line-height:var(--aj-lh-normal);color:var(--aj-text-muted);
}
.aj-hint--error{color:var(--aj-danger)}
/* Rótulo curto em mono. A assinatura da marca. */
.aj-label-txt{
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);
font-weight:var(--aj-w-bold);line-height:var(--aj-lh-normal);
letter-spacing:var(--aj-ls-mono);text-transform:lowercase;
color:var(--aj-accent-text);
}
/* O mesmo rótulo com a barra dupla na frente. */
.aj-eyebrow{
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);
font-weight:var(--aj-w-bold);letter-spacing:var(--aj-ls-mono);
text-transform:lowercase;color:var(--aj-accent-text);
}
.aj-eyebrow::before{content:"// ";color:var(--aj-accent)}
/* Números de destaque: display, porque a mono tem zero cortado. */
.aj-num{
font-family:var(--aj-font-display);font-weight:var(--aj-w-bold);
letter-spacing:-.01em;font-variant-numeric:tabular-nums;
color:var(--aj-heading);
}
/* Trecho de código no meio do texto. */
.aj-code{
font-family:var(--aj-font-mono);font-size:.9em;
background:var(--aj-surface-2);color:var(--aj-ink);
padding:2px 6px;border-radius:var(--aj-r-sm);
}
/* ============================================================
8. BOTÕES
============================================================ */
.aj-btn{
font-family:var(--aj-font-mono);
font-weight:var(--aj-btn-weight);
font-size:var(--aj-btn-font-md);
line-height:1.2;
padding:var(--aj-btn-pad-md);
border:1px solid transparent;
border-radius:var(--aj-btn-radius);
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
gap:var(--aj-btn-gap);
white-space:nowrap;text-align:center;text-decoration:none;
text-transform:lowercase;letter-spacing:var(--aj-btn-tracking);
transition:background var(--aj-fast) var(--aj-ease),
border-color var(--aj-fast) var(--aj-ease),
color var(--aj-fast) var(--aj-ease),
box-shadow var(--aj-fast) var(--aj-ease);
}
/* tamanhos */
.aj-btn--sm{padding:var(--aj-btn-pad-sm);font-size:var(--aj-text-xs)}
.aj-btn--md{padding:var(--aj-btn-pad-md);font-size:var(--aj-btn-font-md)}
.aj-btn--lg{padding:var(--aj-btn-pad-lg);font-size:var(--aj-btn-font-lg)}
/* variantes — PRINCIPAL = primary (verde cheio). Use sempre o primary;
só use as outras quando houver hierarquia real. */
.aj-btn--primary{background:var(--aj-accent);color:var(--aj-on-accent);box-shadow:var(--aj-shadow-xs)}
.aj-btn--primary:hover{background:var(--aj-accent-hover);box-shadow:var(--aj-shadow-sm)}
/* o "segundo verde" — para a 2ª ação quando ambas são verdes */
.aj-btn--primary-soft{background:var(--aj-accent-soft);color:var(--aj-accent-text);border-color:var(--aj-accent-line)}
.aj-btn--primary-soft:hover{background:var(--aj-accent-soft);border-color:var(--aj-accent)}
.aj-btn--secondary{background:var(--aj-solid);color:var(--aj-on-solid);box-shadow:var(--aj-shadow-xs)}
.aj-btn--secondary:hover{background:var(--aj-solid-hover);box-shadow:var(--aj-shadow-sm)}
.aj-btn--ghost{background:var(--aj-surface);color:var(--aj-solid-text);border-color:var(--aj-line-strong)}
.aj-btn--ghost:hover{background:var(--aj-surface-2);border-color:var(--aj-solid)}
.aj-btn--quiet{background:transparent;color:var(--aj-text-muted)}
.aj-btn--quiet:hover{background:var(--aj-surface-2);color:var(--aj-ink)}
.aj-btn--danger{background:var(--aj-danger);color:#fff}
.aj-btn--danger:hover{filter:brightness(1.08)}
.aj-btn--danger-soft{background:var(--aj-danger-soft);color:var(--aj-danger);border-color:transparent}
.aj-btn--danger-soft:hover{border-color:var(--aj-danger)}
.aj-btn:disabled,.aj-btn[disabled],.aj-btn[aria-disabled="true"]{
opacity:.45;cursor:not-allowed;box-shadow:none;
}
.aj-btn:active{transform:translateY(.5px)}
/* ícone dentro do botão */
.aj-btn svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aj-btn--lg svg{width:18px;height:18px}
/* botão só de ícone, quadrado */
.aj-btn--icon{padding:0;width:36px;height:36px;border-radius:var(--aj-r-sm)}
.aj-btn--icon.aj-btn--sm{width:30px;height:30px}
/* linha de botões que empilha no celular */
.aj-btn-row{display:flex;gap:var(--aj-3);flex-wrap:wrap}
/* ============================================================
9. SELOS
============================================================ */
.aj-badge{
display:inline-flex;align-items:center;justify-content:center;gap:5px;
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:700;
padding:3px 9px;border-radius:var(--aj-r-pill);
text-transform:lowercase;white-space:nowrap;line-height:1.35;
}
.aj-badge--lime{background:var(--aj-accent-soft);color:var(--aj-accent-text)}
.aj-badge--blue{background:var(--aj-solid-soft);color:var(--aj-solid-text)}
.aj-badge--gray{background:var(--aj-surface-2);color:var(--aj-text-muted)}
.aj-badge--success{background:var(--aj-success-soft);color:var(--aj-success)}
.aj-badge--warning{background:var(--aj-warning-soft);color:var(--aj-warning)}
.aj-badge--danger{background:var(--aj-danger-soft);color:var(--aj-danger)}
/* selo cheio, para contador que precisa saltar */
.aj-badge--solid{background:var(--aj-accent);color:var(--aj-on-accent)}
/* ============================================================
10. FORMULÁRIO
============================================================ */
.aj-field{display:flex;flex-direction:column;gap:6px;max-width:360px;width:100%}
.aj-label{
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:var(--aj-w-bold);
letter-spacing:var(--aj-ls-mono);text-transform:lowercase;color:var(--aj-text-muted);
}
.aj-input,.aj-select,.aj-textarea{
font-family:var(--aj-font-body);font-size:var(--aj-text-base);
color:var(--aj-ink);
padding:9px 13px;
border:1px solid var(--aj-line-strong);
border-radius:var(--aj-r-sm);
background:var(--aj-surface);
width:100%;
transition:border-color var(--aj-fast) var(--aj-ease),
box-shadow var(--aj-fast) var(--aj-ease);
}
.aj-input::placeholder,.aj-textarea::placeholder{color:var(--aj-text-faint)}
.aj-input:focus,.aj-select:focus,.aj-textarea:focus{
outline:none;border-color:var(--aj-accent);
box-shadow:0 0 0 3px color-mix(in srgb, var(--aj-accent) 22%, transparent);
}
.aj-input:disabled,.aj-select:disabled,.aj-textarea:disabled{
background:var(--aj-surface-2);color:var(--aj-text-faint);cursor:not-allowed;
}
.aj-select{
padding-right:36px;cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23647585' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;
}
.aj-textarea{min-height:96px;resize:vertical;line-height:var(--aj-lh-normal)}
.is-error .aj-input,.is-error .aj-select,.is-error .aj-textarea,
.aj-input.is-error,.aj-select.is-error,.aj-textarea.is-error{
border-color:var(--aj-danger);
box-shadow:0 0 0 3px color-mix(in srgb, var(--aj-danger) 18%, transparent);
}
.is-success .aj-input,.aj-input.is-success{
border-color:var(--aj-success);
box-shadow:0 0 0 3px color-mix(in srgb, var(--aj-success) 18%, transparent);
}
/* — checkbox — */
.aj-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-text)}
.aj-check input{position:absolute;opacity:0;width:0;height:0}
.aj-check__box{
width:18px;height:18px;flex-shrink:0;
border:1.5px solid var(--aj-line-strong);border-radius:var(--aj-r-sm);
background:var(--aj-surface);display:inline-flex;align-items:center;justify-content:center;
transition:background var(--aj-fast) var(--aj-ease),border-color var(--aj-fast) var(--aj-ease);
}
.aj-check__box::after{
content:"";width:9px;height:5px;
border-left:2px solid var(--aj-on-accent);border-bottom:2px solid var(--aj-on-accent);
transform:rotate(-45deg) scale(0);transition:transform var(--aj-fast) var(--aj-ease);margin-top:-2px;
}
.aj-check input:checked+.aj-check__box{background:var(--aj-accent);border-color:var(--aj-accent)}
.aj-check input:checked+.aj-check__box::after{transform:rotate(-45deg) scale(1)}
.aj-check input:disabled+.aj-check__box{opacity:.5}
/* — radio — */
.aj-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-text)}
.aj-radio input{position:absolute;opacity:0;width:0;height:0}
.aj-radio__dot{
width:18px;height:18px;flex-shrink:0;
border:1.5px solid var(--aj-line-strong);border-radius:50%;
background:var(--aj-surface);display:inline-flex;align-items:center;justify-content:center;
transition:border-color var(--aj-fast) var(--aj-ease);
}
.aj-radio__dot::after{
content:"";width:9px;height:9px;border-radius:50%;background:var(--aj-accent);
transform:scale(0);transition:transform var(--aj-fast) var(--aj-ease);
}
.aj-radio input:checked+.aj-radio__dot{border-color:var(--aj-accent)}
.aj-radio input:checked+.aj-radio__dot::after{transform:scale(1)}
/* — switch — */
.aj-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--aj-text-sm);color:var(--aj-text)}
.aj-switch input{position:absolute;opacity:0;width:0;height:0}
.aj-switch__track{
width:38px;height:22px;flex-shrink:0;border-radius:var(--aj-r-pill);
background:var(--aj-surface-3);position:relative;
transition:background var(--aj-med) var(--aj-ease);
}
.aj-switch__track::after{
content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
border-radius:50%;background:#fff;box-shadow:var(--aj-shadow-xs);
transition:transform var(--aj-med) var(--aj-ease);
}
.aj-switch input:checked+.aj-switch__track{background:var(--aj-accent)}
.aj-switch input:checked+.aj-switch__track::after{transform:translateX(16px)}
/* ============================================================
11. FOCO ACESSÍVEL — anel padrão para navegação por teclado
============================================================ */
.aj-btn:focus-visible,.aj-input:focus-visible,.aj-select:focus-visible,
.aj-textarea:focus-visible,.aj-tab:focus-visible,.aj-navitem:focus-visible,
.aj-tile:focus-visible,a:focus-visible,
.aj-check input:focus-visible+.aj-check__box,
.aj-radio input:focus-visible+.aj-radio__dot,
.aj-switch input:focus-visible+.aj-switch__track{
outline:2px solid var(--aj-accent);
outline-offset:2px;
box-shadow:0 0 0 4px color-mix(in srgb, var(--aj-accent) 25%, transparent);
}
/* ============================================================
12. CARTÃO
============================================================ */
.aj-card{
background:var(--aj-surface);
border:var(--aj-border);
border-radius:var(--aj-r-lg);
padding:var(--aj-5);
box-shadow:var(--aj-shadow-sm);
}
.aj-card h3{
font-family:var(--aj-font-display);font-size:var(--aj-text-md);
font-weight:var(--aj-w-semibold);color:var(--aj-heading);margin-bottom:6px;
}
.aj-card p{color:var(--aj-text-muted);font-size:var(--aj-text-sm);line-height:var(--aj-lh-normal)}
/* variante com o fio verde no topo — use com parcimônia, para destacar */
.aj-card--marked{border-top:2px solid var(--aj-accent)}
/* — TILE: cartão clicável de atalho — */
.aj-tile{
display:block;position:relative;
background:var(--aj-surface);
border:var(--aj-border);
border-radius:var(--aj-r-lg);
padding:var(--aj-5);
box-shadow:var(--aj-shadow-xs);
text-decoration:none;
transition:border-color var(--aj-med) var(--aj-ease),
box-shadow var(--aj-med) var(--aj-ease),
transform var(--aj-med) var(--aj-ease);
}
.aj-tile:hover{
border-color:var(--aj-accent-line);
box-shadow:var(--aj-shadow);
transform:translateY(-2px);
}
.aj-tile__icon{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:var(--aj-r-sm);
background:var(--aj-accent-soft);color:var(--aj-accent-text);
transition:background var(--aj-med) var(--aj-ease),color var(--aj-med) var(--aj-ease);
}
.aj-tile:hover .aj-tile__icon{background:var(--aj-accent);color:var(--aj-on-accent)}
.aj-tile__icon svg{width:19px;height:19px;stroke-width:2}
.aj-tile__title{
font-family:var(--aj-font-display);font-size:var(--aj-text-md);
font-weight:var(--aj-w-semibold);color:var(--aj-heading);
}
/* ============================================================
13. ABAS
============================================================ */
.aj-tabs{display:flex;gap:var(--aj-1);border-bottom:1px solid var(--aj-line);overflow-x:auto}
.aj-tab{
font-family:var(--aj-font-mono);font-size:var(--aj-text-sm);font-weight:700;
padding:9px 14px;background:none;border:none;cursor:pointer;
color:var(--aj-text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
white-space:nowrap;text-transform:lowercase;
transition:color var(--aj-fast) var(--aj-ease),border-color var(--aj-fast) var(--aj-ease);
}
.aj-tab:hover{color:var(--aj-ink)}
.aj-tab.is-active{color:var(--aj-heading);border-bottom-color:var(--aj-accent)}
/* ============================================================
14. ALERTA
============================================================ */
.aj-alert{
display:flex;gap:12px;padding:var(--aj-4);
border-radius:var(--aj-r);border:1px solid transparent;
font-size:var(--aj-text-sm);line-height:var(--aj-lh-normal);
background:var(--aj-surface);color:var(--aj-text);
}
.aj-alert__title{font-family:var(--aj-font-mono);font-weight:700;margin-bottom:2px;text-transform:lowercase}
.aj-alert--info{background:var(--aj-info-soft);border-color:color-mix(in srgb, var(--aj-info) 22%, transparent)}
.aj-alert--info .aj-alert__title{color:var(--aj-info)}
.aj-alert--success{background:var(--aj-success-soft);border-color:color-mix(in srgb, var(--aj-success) 22%, transparent)}
.aj-alert--success .aj-alert__title{color:var(--aj-success)}
.aj-alert--warning{background:var(--aj-warning-soft);border-color:color-mix(in srgb, var(--aj-warning) 26%, transparent)}
.aj-alert--warning .aj-alert__title{color:var(--aj-warning)}
.aj-alert--danger{background:var(--aj-danger-soft);border-color:color-mix(in srgb, var(--aj-danger) 22%, transparent)}
.aj-alert--danger .aj-alert__title{color:var(--aj-danger)}
/* ============================================================
15. TOOLTIP
============================================================ */
.aj-tooltip{position:relative;display:inline-flex;border-bottom:1px dotted var(--aj-text-muted);cursor:help}
.aj-tooltip__pop{
position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translateX(-50%) translateY(4px);
background:var(--aj-ink);color:var(--aj-bg);
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);
padding:6px 10px;border-radius:var(--aj-r-sm);white-space:nowrap;
opacity:0;pointer-events:none;z-index:10;box-shadow:var(--aj-shadow);
transition:opacity var(--aj-fast) var(--aj-ease),transform var(--aj-fast) var(--aj-ease);
}
.aj-tooltip:hover .aj-tooltip__pop,.aj-tooltip:focus-within .aj-tooltip__pop{
opacity:1;transform:translateX(-50%) translateY(0);
}
/* ============================================================
16. AVATAR
============================================================ */
.aj-avatar{
width:34px;height:34px;flex-shrink:0;border-radius:50%;
background:var(--aj-solid);color:var(--aj-on-solid);
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--aj-font-mono);font-weight:700;font-size:var(--aj-text-xs);
}
.aj-avatar--lime{background:var(--aj-accent);color:var(--aj-on-accent)}
.aj-avatar--lg{width:56px;height:56px;font-size:var(--aj-text-md)}
/* ============================================================
17. TABELA
============================================================ */
.aj-table{width:100%;border-collapse:collapse;font-size:var(--aj-text-sm)}
.aj-table th{
font-family:var(--aj-font-mono);font-size:var(--aj-text-xs);font-weight:700;
text-transform:lowercase;letter-spacing:var(--aj-ls-mono);
color:var(--aj-text-muted);text-align:left;
padding:10px 12px;border-bottom:1px solid var(--aj-line-strong);
}
.aj-table td{padding:12px;border-bottom:var(--aj-border);color:var(--aj-text)}
.aj-table tbody tr:last-child td{border-bottom:none}
.aj-table tbody tr{transition:background var(--aj-fast) var(--aj-ease)}
.aj-table tbody tr:hover{background:var(--aj-surface-2)}
/* Envelope que dá borda e canto arredondado à tabela. */
.aj-table-wrap{
background:var(--aj-surface);border:var(--aj-border);border-radius:var(--aj-r-lg);
box-shadow:var(--aj-shadow-sm);overflow:hidden;
}
.aj-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ============================================================
18. PROGRESSO / SPINNER / SKELETON
============================================================ */
.aj-progress{height:6px;background:var(--aj-surface-3);border-radius:var(--aj-r-pill);overflow:hidden}
.aj-progress__bar{height:100%;background:var(--aj-accent);border-radius:var(--aj-r-pill);transition:width .3s var(--aj-ease)}
.aj-spinner{
width:20px;height:20px;border:2.5px solid var(--aj-surface-3);
border-top-color:var(--aj-accent);border-radius:50%;
animation:aj-spin .7s linear infinite;
}
.aj-skeleton{
background:linear-gradient(90deg,var(--aj-surface-2) 25%,var(--aj-surface-3) 37%,var(--aj-surface-2) 63%);
background-size:400% 100%;animation:aj-shimmer 1.4s ease infinite;border-radius:var(--aj-r-sm);
}
/* ============================================================
19. MODAL
============================================================ */
.aj-modal{
background:var(--aj-surface);border:var(--aj-border);
border-radius:var(--aj-r-lg);box-shadow:var(--aj-shadow-lg);
max-width:460px;width:100%;overflow:hidden;
}
.aj-modal__head{
padding:var(--aj-5) var(--aj-5) var(--aj-3);
font-family:var(--aj-font-display);font-weight:var(--aj-w-bold);
font-size:var(--aj-text-lg);color:var(--aj-heading);
}
.aj-modal__body{padding:0 var(--aj-5) var(--aj-5);color:var(--aj-text);font-size:var(--aj-text-sm)}
.aj-modal__foot{
padding:var(--aj-4) var(--aj-5);background:var(--aj-surface-2);
border-top:var(--aj-border);display:flex;gap:var(--aj-3);justify-content:flex-end;
}
/* Fundo escuro + centralização — antes cada app reimplementava. */
.aj-modal-veil{
position:fixed;inset:0;z-index:60;
display:flex;align-items:flex-start;justify-content:center;
padding:var(--aj-5);overflow-y:auto;
background:var(--aj-veil);
backdrop-filter:blur(3px);
animation:aj-fade var(--aj-med) var(--aj-ease);
}
/* ============================================================
20. NAVBAR (site, não painel)
============================================================ */
.aj-navbar{
display:flex;align-items:center;gap:var(--aj-5);
padding:var(--aj-4) var(--aj-5);background:var(--aj-blue-700);
border-radius:var(--aj-r-lg);flex-wrap:wrap;
}
.aj-navbar img{height:24px}
.aj-navbar a{font-family:var(--aj-font-mono);font-size:var(--aj-text-sm);color:var(--aj-blue-100);text-decoration:none;transition:color var(--aj-fast)}
.aj-navbar a:hover,.aj-navbar a.is-active{color:var(--aj-lime-500)}
.aj-navbar .spacer{flex:1}
/* ============================================================
21. PAINEL (APP SHELL) — sidebar + topo + conteúdo
…… ferramenta …
No claro a barra lateral virou clara. Painel de trabalho com uma
faixa azul-marinho de 264px pesa a tela inteira e é o que mais
datava o visual; o azul continua na marca, no item ativo e nos
títulos. Quem quiser a barra escura no tema claro usa