/* Nova Acrópole — tokens. GERADO por generate.py. Não edite à mão. */ /* Autônomo: não depende de framework nenhum. Produto que usa Bulma NÃO carrega este arquivo — carrega o nova-acropole-theme.css, que já traz estes tokens mais o mapeamento para --bulma-*. Carregar os dois é desperdício. */ :root { /* O sistema é claro. Sem esta linha o navegador desenha checkbox, radio, scrollbar e o interior do select seguindo o modo do sistema operacional de quem lê, dentro de uma interface clara. */ color-scheme: light; /* A marca por nome canônico. Quatro destas também chegam pela ponte com o Bulma; o Amón não tem ponte, porque não é status. */ --na-brand-verde-heket: #086357; /* 7,16:1 no branco. Serve de fundo com texto branco e de texto sobre branco. */ --na-brand-turquesa-kefer: #009485; /* 3,77:1 no branco. Como fundo só aceita texto branco a partir de 24px; ver regra 13. */ --na-brand-naranja-amon: #F39300; /* 2,34:1 no branco. NUNCA texto branco em cima — regra 12. A tinta é escura. */ --na-brand-amarillo-helios: #FFCA00; /* 1,53:1 no branco. NUNCA texto branco em cima — regra 12. A tinta é escura. */ --na-brand-gris-delfos: #D8D9DB; /* 1,41:1 no branco. É filete e superfície, não marca nem texto. */ /* Escala de opacidade do manual (pág. 6.1). Composta sobre branco, então são tons OPACOS: o token não carrega alfa, porque cor com alfa muda com o que está atrás e o contraste medido deixaria de valer. NÃO são passos da rampa `primary` — são dessaturados. */ --na-brand-verde-heket-90: #217368; /* 90% — fundo com texto branco: 5,65:1 */ --na-brand-verde-heket-80: #398279; /* 80% — fundo com texto branco: 4,52:1 */ --na-brand-verde-heket-50: #84B1AB; /* 50% — fundo com texto verde-heket: 3,02:1 — abaixo de 4,5, só texto grande */ --na-brand-verde-heket-20: #CEE0DD; /* 20% — fundo com texto verde-heket: 5,23:1 */ /* Decomposto, para derivar tom: hover é a luminosidade menos 5 pontos (regra 4). Os hovers de ação já vêm prontos abaixo; isto é para o caso que o sistema não previu. */ --na-primary-h: 172.1deg; --na-primary-s: 85.0%; --na-primary-l: 21.0%; --na-link-h: 173.9deg; --na-link-s: 100.0%; --na-link-l: 29.0%; --na-danger-h: 5.1deg; --na-danger-s: 73.2%; --na-danger-l: 43.9%; --na-success-h: 100.2deg; --na-success-s: 53.8%; --na-success-l: 33.1%; --na-warning-h: 47.5deg; --na-warning-s: 100.0%; --na-warning-l: 50.0%; --na-info-h: 203.1deg; --na-info-s: 72.2%; --na-info-l: 38.0%; --na-scheme-h: 220.0deg; --na-scheme-s: 4.0%; /* a matiz dos neutros */ /* Tinta sobre fundo colorido cheio. Use SEMPRE o par: preencheu com --na-action-primary, o rótulo é --na-action-primary-invert. */ --na-action-primary-invert: #FFFFFF; /* sobre #086357: 7,16:1 */ --na-action-link-invert: #000000; /* sobre #009485: 5,57:1 */ --na-action-danger-invert: #FFFFFF; /* sobre #C22C1E: 5,72:1 */ --na-status-success-invert: #FFFFFF; /* sobre #458227: 4,69:1 */ --na-status-warning-invert: #292000; /* sobre #FFCA00: 10,53:1 */ --na-status-info-invert: #FFFFFF; /* sobre #1B71A7: 5,29:1 */ /* action */ --na-action-primary: #086357; --na-action-primary-hover: #064B42; --na-action-link: #009485; --na-action-link-hover: #007A6E; --na-action-danger: #C22C1E; --na-action-danger-hover: #AC271B; --na-action-default: #FFFFFF; --na-action-default-hover: #F4F5F5; /* text */ --na-text-strong: #111213; --na-text-default: #333538; --na-text-weak: #676A6F; --na-text-link: #086357; --na-text-invert: #FFFFFF; /* surface */ --na-surface-main: #FFFFFF; --na-surface-main-bis: #F4F5F5; --na-surface-body: #ECEDEE; /* border */ --na-border-weak: #D8D9DB; --na-border-default: #909298; /* status */ --na-status-danger: #C22C1E; --na-status-danger-light: #FADEDC; --na-status-danger-dark: #7C1C13; --na-status-success: #458227; --na-status-success-light: #E7F6E0; --na-status-success-dark: #2E561A; --na-status-warning: #FFCA00; --na-status-warning-light: #FFF6D6; --na-status-warning-dark: #856900; --na-status-info: #1B71A7; --na-status-info-light: #DCEEF9; --na-status-info-dark: #114769; } /* Densidade e tipografia por tema. `produto` é tela de sistema, `marketing` é site e landing page. */ [data-theme="marketing"] { --na-family-primary: "Noto Sans", sans-serif; --na-navbar-height: 80px; --na-logo-height: 60px; --na-title-weight: 900; --na-size-1: 3.5rem; --na-size-2: 2.5rem; --na-size-3: 2rem; --na-size-4: 1.5rem; --na-size-5: 1.25rem; --na-size-6: 1rem; --na-size-7: 0.875rem; --na-body-line-height: 1.6; --na-control-height: 2.75em; --na-block-spacing: 2rem; --na-radius: 0.5rem; } [data-theme="produto"] { --na-family-primary: "Noto Sans", sans-serif; --na-navbar-height: 80px; --na-logo-height: 60px; --na-title-weight: 700; --na-size-1: 2rem; --na-size-2: 1.5rem; --na-size-3: 1.25rem; --na-size-4: 1.125rem; --na-size-5: 1rem; --na-size-6: 0.875rem; --na-size-7: 0.75rem; --na-body-line-height: 1.5; --na-control-height: 2.25em; --na-block-spacing: 1rem; --na-radius: 0.375rem; } /* ─── Comportamento que vale em qualquer lugar ───────────── */ /* Controle nativo não herda cor de texto: sem `accent-color` o checkbox e o radio saem no azul padrão do navegador. Verde Heket e não turquesa de propósito — o turquesa é o anel de foco, e estado marcado tem de ser um sinal diferente de estado focado. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--na-action-primary); width: 1rem; height: 1rem; } /* No hover o navegador escurece o accent-color por conta própria, e o Verde Heket já nasce escuro (L 21%). Damos um verde MAIS CLARO para o escurecimento cair de volta perto da cor da marca. O valor aqui não é o que aparece: é o que o navegador transforma no que aparece. */ input[type="checkbox"]:hover, input[type="radio"]:hover { accent-color: hsl(172.1deg, 85.0%, 32%); } /* Alvo mínimo de 24x24 (2.5.8 do WCAG 2.2). O checkbox e o radio nativos têm 13x13; o rótulo é a área clicável, então é nele que a altura entra. Envolva sempre o input com