:root,
html[data-tema-markball="padrao"] {
/* Fonte */
--fonte-familia-principal: "Fredoka", sans-serif;
/* Tamanhos com clamp: manter a interface legivel sem estourar em telas pequenas ou grandes */
--fonte-1xs: clamp(9px, 0.9vw, 10px);
--fonte-2xs: clamp(10px, 1vw, 11px);
--fonte-xs: clamp(11px, 1.1vw, 12px);
--fonte-sm: clamp(12px, 1.25vw, 13px);
--fonte-md: clamp(13px, 1.45vw, 14px);
--fonte-base: clamp(14px, 1.8vw, 16px);
--fonte-lg: clamp(15px, 1.9vw, 18px);
--fonte-xl: clamp(17px, 2.2vw, 22px);
--fonte-2xl: clamp(20px, 2.7vw, 28px);
/* Escalas semanticas de interface */
--fonte-ui-titulo-secao: clamp(16px, 1.45vw, 19px);
--fonte-ui-titulo-grande: clamp(20px, 1.8vw, 24px);
--fonte-ui-rotulo: clamp(12px, 0.95vw, 13px);
--fonte-ui-texto: clamp(12px, 1vw, 13px);
--fonte-ui-destaque: clamp(13px, 1.05vw, 15px);
--fonte-botao-compacta: var(--fonte-sm);
/* Pesos: evitar interfaces excessivamente pesadas */
--peso-regular: 400;
--peso-texto: 500;
--peso-medio: 500;
--peso-titulo: 600;
--peso-botao: 600;
--peso-destaque: 600;
/* Cores principais */
--cor-primaria: #000081;
--cor-primaria-viva: #1a17c0;
--cor-secundaria: #00acc1;
--cor-secundaria-escura: #008799;
/* Estados e apoio */
--cor-sucesso: #19b45b;
--cor-alerta: #f59e0b;
--cor-erro: red;
--cor-erro-hover: #c90000;
--cor-info: #1a17c0;
/* Texto, superficies e bordas */
--cor-texto: #20233a;
--cor-texto-suave: #667085;
--cor-fundo: #f6f8fc;
--cor-fundo-overlay: rgba(246, 248, 252, .88);
--cor-superficie: #ffffff;
--cor-base: #000000;
--cor-superficie-suave: #f7fdff;
--cor-borda: #d9e4f0;
--cor-borda-ciano-suave: rgba(0, 172, 193, .22);
--cor-borda-ciano-media: rgba(0, 172, 193, .48);
/* Radius */
--raio-xs: 6px;
--raio-sm: 8px;
--raio-md: 10px;
--raio-lg: 12px;
--raio-xl: 14px;
--raio-modal: 18px;
--raio-pill: 999px;
/* Sombras */
--sombra-suave: 0 18px 42px -34px rgba(0, 0, 129, .2);
--sombra-card: 0 22px 50px -34px rgba(0, 0, 129, .32);
--sombra-modal: 0 28px 70px -36px rgba(0, 0, 129, .44);
--sombra-flutuante: 0 24px 44px -32px rgba(0, 0, 129, .28);
/* Transicoes */
--transicao-rapida: .16s ease;
--transicao-media: .22s ease;
/* Foco e acessibilidade */
--foco-outline-largura: 3px;
--foco-outline-offset: 2px;
--foco-outline-cor: rgba(0, 172, 193, .22);
--foco-anel-formulario: 0 0 0 3px rgba(0, 172, 193, .12);
--foco-anel-erro: 0 0 0 3px rgba(229, 57, 53, .08);
/* Botoes */
--botao-altura: 42px;
--botao-altura-pequena: 34px;
--botao-altura-grande: 48px;
--botao-altura-icone: 40px;
--botao-altura-fechar: 40px;
--botao-altura-atalho: 16px;
--botao-largura-icone: 40px;
--botao-largura-fechar: 40px;
--botao-padding-x: 18px;
--botao-padding-x-pequeno: 8px;
--botao-padding-x-grande: 22px;
--botao-gap: 8px;
--botao-gap-pequeno: 6px;
--botao-gap-grupo: 10px;
--botao-borda: 1px;
--botao-radius: var(--raio-md);
--botao-radius-atalho: var(--raio-xs);
--botao-fonte: var(--fonte-md);
--botao-fonte-pequena: var(--fonte-sm);
--botao-fonte-grande: var(--fonte-base);
--botao-fonte-icone: var(--fonte-lg);
--botao-fonte-fechar: 28px;
--botao-fonte-atalho: var(--fonte-2xs);
--botao-line-height: 1.15;
--botao-line-height-icone: 1;
--botao-atalho-min-width: 25px;
--botao-icone-conteudo-tamanho: 18px;
--botao-atalho-padding: 1px 6px;
--botao-atalho-borda-inferior: 2px;
--botao-atalho-opacidade: .9;
--botao-loading-tamanho: 16px;
--botao-loading-borda: 2px;
--botao-loading-duracao: .65s;
--botao-loading-duracao-reduzida: 1.2s;
--botao-segmentado-padding: 4px;
--botao-segmentado-gap: 4px;
--botao-segmentado-borda: var(--cor-borda);
--botao-cor-texto-escuro: #20233a;
--botao-primario-fundo: var(--cor-secundaria);
--botao-primario-fundo-hover: var(--cor-secundaria-escura);
--botao-primario-borda: var(--cor-secundaria);
--botao-primario-borda-hover: var(--cor-secundaria-escura);
--botao-destaque-fundo: var(--cor-primaria);
--botao-destaque-fundo-hover: var(--cor-primaria-viva);
--botao-destaque-borda: var(--cor-primaria);
--botao-destaque-borda-hover: var(--cor-primaria-viva);
--botao-secundario-fundo: var(--cor-superficie);
--botao-secundario-fundo-hover: var(--cor-superficie-suave);
--botao-secundario-borda: rgba(0, 172, 193, .5);
--botao-secundario-borda-hover: var(--cor-secundaria);
--botao-secundario-texto: var(--cor-primaria);
--botao-sucesso-fundo: var(--cor-sucesso);
--botao-sucesso-borda: var(--cor-sucesso);
--botao-sucesso-fundo-hover: #128447;
--botao-sucesso-borda-hover: #128447;
--botao-perigo-fundo: var(--cor-erro);
--botao-perigo-borda: var(--cor-erro);
--botao-perigo-fundo-hover: var(--cor-erro-hover);
--botao-perigo-borda-hover: var(--cor-erro-hover);
--botao-alerta-fundo: var(--cor-alerta);
--botao-alerta-borda: var(--cor-alerta);
--botao-alerta-fundo-hover: #d98c00;
--botao-alerta-borda-hover: #d98c00;
--botao-alerta-texto: var(--botao-cor-texto-escuro);
--botao-neutro-fundo: #667085;
--botao-neutro-borda: #667085;
--botao-neutro-fundo-hover: #4b5563;
--botao-neutro-borda-hover: #4b5563;
--botao-fantasma-fundo: transparent;
--botao-fantasma-borda: transparent;
--botao-fantasma-fundo-hover: rgba(0, 172, 193, .08);
--botao-fantasma-borda-hover: rgba(0, 172, 193, .16);
--botao-link-fundo: transparent;
--botao-link-texto: var(--cor-primaria);
--botao-link-texto-hover: var(--cor-secundaria-escura);
--botao-icone-fundo: var(--cor-superficie);
--botao-icone-borda: var(--cor-borda);
--botao-icone-borda-hover: var(--cor-secundaria);
--botao-icone-fundo-hover: var(--cor-superficie-suave);
--botao-icone-texto: var(--cor-primaria);
--botao-icone-perigo-fundo: var(--cor-erro);
--botao-icone-perigo-borda: var(--cor-erro);
--botao-icone-perigo-fundo-hover: var(--cor-erro-hover);
--botao-icone-perigo-borda-hover: var(--cor-erro-hover);
--botao-fechar-fundo: var(--cor-erro);
--botao-fechar-borda: var(--cor-erro);
--botao-fechar-fundo-hover: var(--cor-erro-hover);
--botao-fechar-borda-hover: var(--cor-erro-hover);
--botao-atalho-fundo: rgba(255, 255, 255, .16);
--botao-atalho-fundo-claro: rgba(0, 172, 193, .08);
/* Formularios */
--form-preview-largura: min(1120px, calc(100% - 32px));
--form-preview-padding-y: 32px;
--form-preview-gap: 16px;
--form-preview-card-padding: 18px;
--form-preview-topo-padding: 22px;
--form-preview-borda: 1px solid rgba(0, 172, 193, .24);
--form-preview-texto-margin-top: 8px;
--form-modal-padding: 18px;
--form-modal-padding-mobile: 8px;
--form-modal-fundo: rgba(3, 4, 52, .34);
--form-modal-blur: blur(5px);
--form-card-largura: min(760px, 100%);
--form-card-altura-maxima: min(92vh, 860px);
--form-card-altura-maxima-mobile: calc(100vh - 16px);
--form-card-borda: 1px solid rgba(0, 172, 193, .3);
--form-card-radius: var(--raio-modal);
--form-cabecalho-altura-minima: 68px;
--form-cabecalho-padding: 16px 18px;
--form-cabecalho-padding-mobile: 10px;
--form-cabecalho-gap: 16px;
--form-corpo-padding: 18px;
--form-corpo-padding-mobile: 2px 10px;
--form-rodape-padding: 14px 18px;
--form-rodape-padding-mobile: 12px 14px;
--form-rodape-gap: 12px;
--form-scrollbar-largura: 8px;
--form-scrollbar-largura-dropdown: 7px;
--form-scrollbar-cor: rgba(0, 172, 193, .55);
--form-alerta-padding: 12px 14px;
--form-alerta-borda-info: rgba(0, 172, 193, .28);
--form-alerta-fundo-info: #f0fbfd;
--form-alerta-borda-erro: rgba(229, 57, 53, .34);
--form-alerta-fundo-erro: #fff5f5;
--form-alerta-texto-erro: #b42318;
--form-alerta-borda-sucesso: rgba(25, 180, 91, .32);
--form-alerta-fundo-sucesso: #effbf4;
--form-alerta-texto-sucesso: #087443;
--form-secao-padding: 16px;
--form-secao-gap-vertical: 14px;
--form-grid-gap: 13px;
--form-campo-gap: 6px;
--form-controle-altura: 42px;
--form-controle-padding-x: 12px;
--form-controle-padding-y-textarea: 10px;
--form-controle-borda: 1.5px solid var(--cor-borda);
--form-controle-borda-hover: rgba(0, 172, 193, .62);
--form-controle-borda-foco: var(--cor-secundaria);
--form-controle-radius: var(--raio-md);
--form-controle-textarea-altura-minima: 96px;
--form-erro-altura-minima: 16px;
--form-opcoes-gap: 8px;
--form-opcoes-gap-aberto: 6px;
--form-opcao-padding: 10px 12px;
--form-opcao-gap: 9px;
--form-opcao-borda: 1px solid var(--cor-borda);
--form-opcao-borda-hover: rgba(0, 172, 193, .7);
--form-opcao-borda-ativa: rgba(0, 172, 193, .38);
--form-opcao-borda-hover-suave: rgba(0, 172, 193, .26);
--form-opcao-fundo-hover: var(--cor-superficie-suave);
--form-opcao-fundo-ativo: #f0fbfd;
--form-lista-altura-maxima: 220px;
--form-lista-topo: calc(100% + 6px);
--form-lista-padding: 7px;
--form-lista-dropdown-borda: 1px solid rgba(0, 172, 193, .32);
--form-lista-botao-gap: 10px;
--form-lista-botao-padding-x: 12px;
--form-lista-botao-borda: 1.5px solid var(--cor-borda);
--form-lista-opcao-altura-minima: 38px;
--form-lista-opcao-padding: 8px 10px;
--form-lista-opcao-marcador-tamanho: 18px;
--form-lista-opcao-marcador-borda: 1.5px solid var(--cor-borda);
--form-lista-opcao-marcador-inset: inset 0 0 0 4px var(--cor-superficie);
--form-lista-seta-tamanho: 9px;
--form-lista-seta-borda: 2px solid var(--cor-secundaria);
--form-lista-seta-transform-fechado: rotate(45deg) translateY(-2px);
--form-lista-seta-transform-aberto: rotate(225deg) translateY(-1px);
--form-switch-altura-minima: 44px;
--form-switch-gap: 14px;
--form-switch-padding: 10px 12px;
--form-switch-borda: 1px solid var(--cor-borda);
--form-slider-largura: 48px;
--form-slider-altura: 26px;
--form-slider-fundo: #d7e1ee;
--form-slider-knob-topo: 3px;
--form-slider-knob-esquerda: 3px;
--form-slider-knob-tamanho: 20px;
--form-slider-knob-deslocamento: 22px;
--form-upload-altura-minima: 132px;
--form-upload-borda: 1.5px dashed rgba(0, 172, 193, .48);
--form-upload-fundo: var(--cor-superficie-suave);
--form-upload-gap: 10px;
--form-upload-padding: 16px;
--form-upload-botao-altura: 40px;
--form-upload-botao-padding-x: 16px;
--form-upload-botao-borda: 1px solid var(--cor-secundaria);
--form-upload-botao-fundo: var(--cor-secundaria);
--form-upload-botao-fundo-hover: var(--cor-secundaria-escura);
--form-upload-botao-borda-hover: var(--cor-secundaria-escura);
--form-upload-preview-gap: 10px;
--form-upload-preview-margin-top: 8px;
--form-upload-preview-coluna-arquivo: repeat(auto-fit, minmax(170px, 1fr));
--form-upload-preview-coluna-imagem: repeat(auto-fill, minmax(92px, 92px));
--form-upload-preview-item-padding: 8px;
--form-upload-preview-item-gap: 10px;
--form-upload-preview-item-grid: 56px minmax(0, 1fr);
--form-upload-preview-thumb-tamanho: 56px;
--form-upload-preview-thumb-imagem: 82px;
--form-upload-preview-thumb-borda: 1px solid rgba(0, 172, 193, .28);
--form-upload-preview-item-imagem-largura: 92px;
--form-upload-preview-item-imagem-altura: 92px;
--form-upload-preview-item-imagem-padding: 4px;
--form-upload-preview-remover-altura-minima: 28px;
--form-upload-preview-remover-padding-x: 8px;
--form-upload-preview-remover-topo: 50%;
--form-upload-preview-remover-direita: 8px;
--form-upload-preview-remover-borda: 1px solid var(--cor-erro);
--form-upload-preview-remover-fundo: var(--cor-erro);
--form-upload-preview-remover-borda-hover: var(--cor-erro-hover);
--form-upload-preview-remover-fundo-hover: var(--cor-erro-hover);
--form-upload-preview-remover-tamanho-imagem: 24px;
--form-upload-preview-remover-topo-imagem: 4px;
--form-upload-preview-remover-direita-imagem: 4px;
--form-upload-preview-info-padding-direita: 58px;
--form-item-dinamico-gap: 8px;
--form-lista-dinamica-gap: 8px;
--form-botao-icone-borda: 1px solid rgba(229, 57, 53, .32);
--form-botao-icone-fundo: #fff5f5;
--form-botao-icone-fundo-hover: var(--cor-erro);
--form-botao-icone-texto: var(--cor-erro);
--form-botao-icone-texto-hover: var(--cor-superficie);
}
html[data-tema-markball="campanha"] {
/*
Exemplo de tema sazonal.
Ative definindo data-tema-markball="campanha" no html.
Ajuste somente estas variaveis para a interface herdar as novas cores.
*/
--cor-primaria: #000081;
--cor-primaria-viva: #1a17c0;
--cor-secundaria: #00acc1;
--cor-secundaria-escura: #008799;
--cor-alerta: #f59e0b;
}