/* ============================================================================ * Tokens — Consistem Aurora DS * ---------------------------------------------------------------------------- * Valores publicados do design system. Nenhum consumidor deve escrever cor, * raio, sombra ou espaço à mão: tudo sai daqui por var(--*). * * No Aurora DS estes valores vivem em tokens/palette.css, tokens/colors.css, * tokens/typography.css, tokens/space.css e tokens/effects.css. Enquanto a * biblioteca não é consumida como dependência, ficam materializados aqui com * os mesmos nomes — trocar por um @import da biblioteca não deve exigir * nenhuma alteração nas folhas que os usam. * ==========================================================================*/ :root { /* ---- Cor: ação ------------------------------------------------------- */ --colorPrimary: #E84F3D; /* coral-6 — ação principal e preenchimento */ --colorPrimaryHover: #F57A67; /* coral-5 — texto coral sobre fundo escuro */ --colorPrimaryActive: #C23329; /* coral-7 — texto coral sobre fundo claro */ --colorPrimaryBg: #FFF4F0; /* fundo coral claro (hover do botão fantasma) */ /* ---- Cor: marca / acento --------------------------------------------- */ --colorTertiary: #049C7A; /* verde-petróleo da marca */ --colorTertiaryBorder: #63C2A4; /* o mesmo acento sobre fundo escuro */ /* ---- Cor: superfície -------------------------------------------------- */ --colorSecondary: #282629; /* chão escuro, o mesmo da rail do ERP */ --colorBgLayout: #F5F5F5; /* chão de seção clara */ --colorBgContainer: #FFFFFF; /* painel sobre o chão claro */ /* ---- Cor: texto (opacidade sobre preto, nunca cinza em hex) ----------- */ --colorText: rgba(0, 0, 0, .88); --colorTextSecondary: rgba(0, 0, 0, .65); --colorTextTertiary: rgba(0, 0, 0, .45); --colorTextDisabled: rgba(0, 0, 0, .25); /* ---- Cor: fio e preenchimento ---------------------------------------- */ --colorBorderSecondary: #F0F0F0; --colorFillSecondary: rgba(0, 0, 0, .06); /* trilho, preenchimento neutro */ --colorFillTertiary: rgba(0, 0, 0, .04); /* hover de botão de texto */ --colorBgElevated: #FFFFFF; /* o que precisa parecer mais alto */ /* ---- Raio ------------------------------------------------------------- */ --radiusSurface: 20px; /* padrão de TODA superfície de UI */ --radiusControl: 12px; /* campo, controle */ --radiusButton: 999px; /* botão: variante Circle */ --radiusTag: 6px; /* tag */ /* ---- Efeito ----------------------------------------------------------- */ /* Sombra de cartão: três camadas, 2–3% de alfa. Um sussurro. */ --boxShadow: 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 6px -1px rgba(0, 0, 0, .02), 0 2px 4px 0 rgba(0, 0, 0, .02); /* Popover / modal — para o que precisa parecer mais alto. */ --boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05); /* Foco: anel externo de 2px a 20%. */ --shadowFocus: 0 0 0 2px rgba(232, 79, 61, .2); --shadowFocusTertiary: 0 0 0 2px rgba(4, 156, 122, .2); /* ---- Espaço ----------------------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; /* base */ --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; /* ---- Altura de controle ----------------------------------------------- */ --controlHeightXS: 16px; --controlHeightSM: 24px; --controlHeight: 32px; --controlHeightLG: 40px; /* ---- Tipografia -------------------------------------------------------- */ /* Uma família só, em dois pesos: 400 texto, 600 estrutura. Entrelinha 1.4 em todos os degraus, sem exceção. */ --fontFamily: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fontFamilyCode: Consolas, "Courier New", monospace; --fontWeightRegular: 400; --fontWeightStrong: 600; --lineHeightBase: 1.4; --fontSizeDisplay: 56px; /* título do herói */ --fontSizeH1: 38px; /* números do herói */ --fontSizeH2: 30px; /* título de seção */ --fontSizeH3: 24px; /* título da etapa */ --fontSizeH4: 20px; /* título de cartão */ --fontSizeLG: 16px; /* apoio; 600 no selo da marca */ --fontSizeBase: 14px; /* corpo, opções, contador */ --fontSizeCaption: 12px; /* linha de apoio de campo */ --fontSizeCaption2: 10px; /* selo — único degrau em caixa alta */ } /* ============================================================================ * Ícones * ---------------------------------------------------------------------------- * Glifo não tem alvo, não tem estado e não herda cor com previsibilidade, então * nenhum caractere é usado como ícone. O desenho entra como máscara CSS e a cor * vem de `background-color: currentColor` — o ícone acompanha o texto em todo * estado (hover, disabled, foco) sem uma regra por estado. * * Os traçados abaixo são os do conjunto Carbon, embutidos para a página não * depender de rede. * ==========================================================================*/ .ico { display: inline-block; width: 1em; height: 1em; flex: none; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: -0.125em; } /* carbon:add */ .ico-add { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z'/%3E%3C/svg%3E"); } /* carbon:arrow-left */ .ico-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M13 26l1.41-1.41L6.83 17H29v-2H6.83l7.58-7.59L13 6L3 16z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M13 26l1.41-1.41L6.83 17H29v-2H6.83l7.58-7.59L13 6L3 16z'/%3E%3C/svg%3E"); } /* carbon:checkmark */ .ico-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M13 24l-9-9l1.41-1.41L13 21.17L26.59 7.59L28 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M13 24l-9-9l1.41-1.41L13 21.17L26.59 7.59L28 9z'/%3E%3C/svg%3E"); } /* carbon:trash-can */ .ico-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M12 12h2v12h-2zm6 0h2v12h-2z'/%3E%3Cpath fill='%23000' d='M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M12 12h2v12h-2zm6 0h2v12h-2z'/%3E%3Cpath fill='%23000' d='M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z'/%3E%3C/svg%3E"); } /* ---- Redes sociais (Simple Icons) -------------------------------------- Mesma técnica dos demais: máscara + currentColor, para o ícone acompanhar a cor do texto em cada contexto (rodapé escuro na tela, escuro no papel). */ .ico-facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); } .ico-instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E"); } .ico-linkedin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); } .ico-youtube { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }