/* ========================================================================= O3LAB — tokens Fonte única de verdade visual. Deriva do brandbook "O3LAB — Identidade Visual v1.1". Nenhum valor aqui é escolha de gosto: cada cor, peso e proporção vem de uma seção do documento, citada ao lado. Regra que governa o arquivo: nenhuma cor literal fora daqui. O site antigo acumulou 55 hexadecimais soltos e 17 tamanhos de fonte porque cada widget escolhia sozinho. Aqui só existe token. ========================================================================= */ :root { /* --- Cor institucional (brandbook 3.1 / 3.2 / 3.3 / 3.4) ---------------- */ --o3-deep: #01357B; /* institucional principal */ --o3-bright: #2CADFF; /* destaque e tecnologia */ --o3-navy: #1F1F68; /* extensão escura, atmosférica */ --o3-cyan: #00D9FF; /* acento pontual */ --o3-purple: #6C4BC4; /* apenas contexto científico */ /* Ciano e roxo estão declarados e não pintam nada: medida da área de cada cor nas páginas geradas dá 0% para os dois, contra os 10% de vibrante e 5% de acento que a seção 4 do brandbook prevê. Ficam aqui porque este arquivo espelha o documento da marca, e apagar uma cor institucional faria o espelho mentir. Antes de dar uso a qualquer um dos dois: o ciano rende 1,7:1 sobre branco e não pode virar texto nem borda ali, pela mesma aritmética que faz o brandbook (3.1) proibir o vibrante, de 2,46:1. Sobre campo Deep Blue ele rende 6,88:1 e serve. O roxo rende 6,1:1 sobre branco e passa como texto, mas o brandbook o reserva a contexto científico. */ /* Derivadas, para estado e profundidade. Mantidas na mesma família de matiz do Deep Blue — o brandbook proíbe alterar as cores da marca, então estas existem como sombra e realce dela, nunca como cor nova. */ --o3-deep-900: #011E48; --o3-deep-800: #01285C; --o3-deep-700: #01357B; --o3-deep-600: #0A4A9B; --o3-deep-050: #E8F0FB; /* --- Neutros (brandbook 3.5) ------------------------------------------- */ --o3-white: #FFFFFF; --o3-offwhite: #F5F7FA; --o3-gray-100: #E7EBF0; /* divisórias e elementos secundários */ --o3-gray-500: #4A5563; /* texto corrido — 7,58:1 sobre branco */ --o3-graphite: #202631; /* textos escuros e informações */ /* --- Papéis semânticos -------------------------------------------------- A proporção 60/25/10/5 do brandbook (seção 4) não é decorativa: ela decide quanto de cada campo entra na página. Claro domina, azul profundo ancora, azul vibrante pontua, ciano acentua. */ /* Três papéis de superfície clara, e não dois: com a página em off-white, um cartão branco só se destaca se tiver um papel próprio. Colapsar os dois faria os cartões de equipamento sumirem no fundo. */ --surface: var(--o3-offwhite); /* fundo da página */ --surface-raised: var(--o3-white); /* cartão, campo de formulário, ficha */ --surface-sunken: var(--o3-white); /* seção alternada, que agora clareia */ --surface-inverse: var(--o3-deep); --surface-inverse-alt: var(--o3-navy); --text: var(--o3-graphite); --text-muted: var(--o3-gray-500); --text-on-inverse: var(--o3-white); /* Sobre campo azul, o texto secundário é tingido do próprio matiz, nunca cinza — cinza sobre azul lê como falha de renderização. */ --text-muted-on-inverse: #A9C6EC; --line: var(--o3-gray-100); --line-strong: #C9D5E4; --line-on-inverse: #1B4E96; --accent: var(--o3-bright); --accent-quiet: var(--o3-cyan); /* Ação. O azul vibrante rende 2,46:1 sobre branco — o próprio brandbook (3.1) proíbe usá-lo como texto. Então a ação primária é campo Deep Blue com texto branco (11,27:1), e o Bright Blue só aparece como texto quando o fundo é Deep Blue ou Navy (4,58:1). */ --action-bg: var(--o3-deep); --action-bg-hover: #012C68; --action-text: var(--o3-white); --action-ghost-text: var(--o3-deep); --action-ghost-line: var(--o3-deep); /* Anel de foco: Deep Blue no claro, não o Bright Blue. O comentário de --action-bg logo acima já dizia que o azul vibrante rende 2,46:1 sobre branco, e o anel estava usando exatamente ele — 2,29:1 sobre o fundo da página, contra os 3:1 que a WCAG 2.4.11 exige de indicador. A regra estava escrita e não tinha sido aplicada aqui. O Deep Blue rende 11,27:1 sobre branco. Sobre campo azul ele sumiria, e é por isso que .field-deep e .field-navy devolvem o Bright Blue ao anel, do mesmo jeito que já fazem com texto, link e botão. */ --focus-ring: var(--o3-deep); /* --- Erro --------------------------------------------------------------- O brandbook não define cor de erro, porque não previu formulário. O papel existe de qualquer jeito — validação, estado de envio falho — e estava resolvido com seis hexadecimais soltos no base.css, o que contradizia a regra de abertura deste arquivo. A família vem do Material Design 3, que é a única referência aberta com par claro/escuro já verificado para contraste, e fica deliberadamente fora da paleta institucional: erro precisa se distinguir da marca, não harmonizar com ela. */ --danger-line: #B3261E; /* borda de campo inválido, 6,54:1 sobre branco */ --danger-text: #B3261E; /* mensagem de erro, 6,54:1 sobre branco */ --danger-surface: #FCEEEE; /* fundo do aviso de falha */ --danger-on-surface: #8C1D18; /* texto sobre esse fundo, 8,07:1 */ /* --- Confirmação -------------------------------------------------------- Mesmo raciocínio do erro, e pela mesma razão: o brandbook não previu formulário, então não define cor de confirmação. Estava resolvida com Deep 050 e Deep Blue, ou seja, com a própria marca — e o resultado é que "pedido enviado" ficava visualmente idêntico a qualquer painel azul-claro da página. Confirmação precisa se distinguir do ambiente, não harmonizar com ele; é a única tela em que o visitante precisa de resposta inequívoca depois de preencher oito campos. */ --ok-line: #146C2E; /* 5,75:1 sobre a superfície abaixo */ --ok-text: #0B5B27; /* 7,28:1 sobre a superfície abaixo */ --ok-surface: #E6F4EA; /* fundo do aviso de sucesso */ --ok-on-surface: #0B5B27; /* 7,28:1 */ /* Tinta da marca sobre campo azul. O Deep Blue sumiria ali, e o Bright Blue rende 4,75:1 sobre o Deep — é a exceção que o brandbook (3.1) permite ao vibrante, que sobre claro não pode virar texto (2,46:1). Existe como token porque três componentes precisavam da mesma exceção e cada um chamava a cor da marca direto. */ --brand-ink-on-inverse: var(--o3-bright); /* --- Documentos --------------------------------------------------------- Derivadas do Deep Blue 050, para o bloco de fichas e catálogos. Moram aqui, e não no componente, porque são cor: a regra de abertura deste arquivo não abre exceção para token de componente. */ --doc-bg-hover: #DCE9FA; --doc-line: #BBD3F1; /* Tinta da marca em texto: link, rótulo de modelo, ênfase. Existe como token, e não como regra por tema, porque toda cor de marca aplicada diretamente em texto precisa virar junto com o fundo — foi exatamente assim que o Deep Blue acabou a 1,6:1 sobre o escuro na primeira revisão. */ --brand-ink: var(--o3-deep); /* --- Tipografia (brandbook 5) ------------------------------------------ Inter, família única. O brandbook proíbe misturar famílias, então não há segunda face aqui — a variação vem de peso, tamanho e espaço, como a seção 5.2 determina. */ --font: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Escala de seis degraus com razão ~1,25, ancorada em 17px de corpo. O site antigo tinha 17 tamanhos no desktop e 8 deles usados uma vez só. */ --text-xs: 0.8125rem; /* 13px — rótulo de ficha técnica, legenda */ --text-sm: 0.9375rem; /* 15px — texto de apoio */ --text-base: 1.0625rem; /* 17px — corpo */ --text-md: 1.25rem; /* 20px — entrada de leitura, resumo */ --text-lg: 1.5rem; /* 24px — título de bloco */ --text-xl: 2rem; /* 32px — título de seção */ --text-2xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); /* título de página */ /* Teto baixado de 4.5rem para 3.5rem. A 72px, a chamada de oito palavras da home quebrava em quatro linhas e empurrava os botões 43px abaixo da dobra em 1366×768 — a resolução do notebook em que o comprador trabalha, e não a de 1440 em que o site é revisado. Escala fluida resolve largura de tela, não contagem de linhas: esse teto é decisão editorial, não de viewport. */ --text-3xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); /* display do hero */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.6; --leading-loose: 1.75; /* Tracking negativo cresce com o tamanho; o piso é -0.04em e o uso real fica entre -0.02 e -0.03em. */ --tracking-display: -0.03em; --tracking-title: -0.02em; --tracking-body: -0.006em; --tracking-label: 0.08em; /* rótulo de ficha técnica, caixa alta curta */ /* Medida de leitura: 65-75 caracteres. */ --measure: 68ch; --measure-narrow: 54ch; /* --- Espaço ------------------------------------------------------------- Um ritmo só, base 4px. Grupos apertados, separação generosa. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(var(--space-7), 5vw, var(--space-9)); /* --- Estrutura ---------------------------------------------------------- */ --container: 76rem; --container-narrow: 44rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius-sm: 4px; --radius: 12px; /* teto de card: 12-16px */ --radius-lg: 16px; --radius-pill: 999px; /* apenas controles pequenos */ /* Elevação declarada uma vez: ou borda, ou sombra. Nunca as duas no mesmo elemento — 1px de borda sob uma sombra larga é o card fantasma. */ --shadow-raised: 0 1px 2px rgba(1, 53, 123, 0.06), 0 8px 24px -12px rgba(1, 53, 123, 0.24); --shadow-lifted: 0 2px 4px rgba(1, 53, 123, 0.08), 0 20px 48px -20px rgba(1, 53, 123, 0.32); /* --- Movimento ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 140ms; --duration: 240ms; --duration-slow: 520ms; } /* ========================================================================= Cena de uso e tema Quem usa: gerente de laboratório e engenheiro de QC, em bancada ou escritório, sob luz ambiente alta, comparando três fornecedores em abas lado a lado, frequentemente imprimindo a ficha para anexar ao processo de compra. Essa cena decide o tema: claro, com campos azuis profundos como âncora. Escuro seria uma escolha estética contra o uso real. O tema escuro existe, mas NÃO segue o sistema operacional: o brandbook determina 60% de fundos claros, e um visitante com o SO em modo escuro via exatamente o oposto disso. Ele entra apenas por escolha explícita, com data-theme="dark" no elemento raiz. ========================================================================= */ :root[data-theme="dark"] { --surface: #0B1220; --surface-raised: #111B2E; --surface-sunken: #070D18; --surface-inverse: var(--o3-navy); --surface-inverse-alt: #14143F; --text: #E9EEF6; --text-muted: #A3B2C7; --text-muted-on-inverse: #A9C6EC; --line: #1C2940; --line-strong: #2A3A56; --action-bg: var(--o3-bright); --action-bg-hover: #52BDFF; --action-text: #06182F; /* No escuro o Deep Blue sumiria no fundo; o Bright Blue rende 7,6:1 aqui. */ --focus-ring: var(--o3-bright); /* O vermelho escuro do tema claro fica ilegível sobre fundo escuro: a família inverte, com o tom claro virando texto e borda, e o escuro virando superfície. Medido sobre o cartão #111B2E: 10,08:1 no texto e na borda, 9,27:1 sobre a superfície composta. */ --danger-line: #F2B8B5; --danger-text: #F2B8B5; --danger-surface: rgba(179, 38, 30, .18); --danger-on-surface: #F2B8B5; /* A confirmação inverte igual ao erro. Medido sobre o cartão #111B2E: 10,03:1 no texto, e 8,77:1 sobre a superfície composta (#122A2E). */ --ok-line: #7BD99B; --ok-text: #7BD99B; --ok-surface: rgba(20, 108, 46, .18); --ok-on-surface: #7BD99B; /* No escuro o campo azul é o Navy, e a tinta sobre ele continua o vibrante. */ --brand-ink-on-inverse: var(--o3-bright); --action-ghost-text: var(--o3-bright); --action-ghost-line: #2A3A56; --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7); --brand-ink: var(--o3-bright); --shadow-lifted: 0 2px 4px rgba(0, 0, 0, 0.55), 0 20px 48px -20px rgba(0, 0, 0, 0.8); }