/* ============================================================================ CASEMBRAPA — Design System Tokens ---------------------------------------------------------------------------- DS Casembrapa | v1.2 Última onda integrada | CORR-3 (2026-05-25) Próxima revisão prevista | ao fechar CORR-5 ---------------------------------------------------------------------------- CONVENÇÃO DE NOTAÇÃO DE COR (Onda Auditoria DS CORR-3 P-04) HSL é a notação canônica do DS Casembrapa: - Formato sem alpha: hsl(H S% L%) ex: hsl(215 34% 33%) - Formato com alpha: hsl(H S% L% / A) ex: hsl(215 46% 11% / 0.45) - hsla(H, S%, L%, A) aceitável APENAS em fallback @supports (padrão consolidado Onda 97.14 + CORR-1 + CORR-2 para suportar Safari iOS < 16.2) Hex tolerado APENAS para: - --ca-color-white e --ca-color-black (constantes universais) - --ca-social-* (brand guidelines de terceiros) rgb() / rgba() PROIBIDO em qualquer contexto (USO ou DEFINIÇÃO). Razão: HSL torna interpolação tonal (escalas 50→950) trivial de raciocinar; preserva matiz quando ajustamos saturação ou luminosidade. ---------------------------------------------------------------------------- Fonte HISTÓRICA: references/Casembrapa Design System _standalone_.html (v1.0, ~2026-05-04, defasado em ~12 ondas; mantido apenas como referência arqueológica desde CORR-1 C-03). Fonte CANÔNICA VIVA: este arquivo + casembrapa-theme/docs/design-system.md. ---------------------------------------------------------------------------- - Tokens primitivos (escalas tonais) e semânticos (papéis: surface, text...) - Aliases legacy --wf-* mapeados para os novos tokens (sem refactor de classes) - Use sempre `var(--ca-*)` em código novo. `var(--wf-*)` é apenas compat. ---------------------------------------------------------------------------- HISTÓRICO - V1.0 (2026-05-04): versão inicial derivada do standalone HTML. - V1.1 (2026-05-12): adicionados tokens -700 às famílias semânticas (success/warning/error/info) para garantir contraste WCAG AA em badges, alerts e estados textuais sobre fundos *-50 da mesma família. Motivo: estados textuais como "Pago", "Em análise", "Pendente" precisam de um tom forte o suficiente para passar AA (4.5:1) sobre fundo claro *-50. O -600 nem sempre passava em todos os pares (success-600 e warning-600 falhavam AA por margem ampla — 2.86:1 e 2.92:1 respectivamente). IMPORTANTE: --ca-success-700 recebe VALOR PRÓPRIO (hsl 166 100% 22%) em vez de aliasar --ca-verde-piscina-700. Este último, com hsl 166 100% 26%, fica em 4.35:1 sobre success-50 — abaixo do limiar AA. O valor próprio garante 5.73:1. Validação completa em docs/CONTRAST_VALIDATION_REPORT.md ATENÇÃO: a Onda 97.1 introduziu `@layer tokens, base, components, utilities` wrappando os 4 CSS files. Isso causou regressão visual no WordPress real (CSS de Gutenberg blocks e WP core ficou fora de @layer e venceu o tema). Onda 97.1.1 removeu os wraps. Os tokens novos `--ca-social-*` e `--ca-bp-*` permanecem (não causaram regressão). ============================================================================ */ :root { /* -------------------------------------------------------------------------- CORES PRIMITIVAS — escalas tonais -------------------------------------------------------------------------- */ /* Azul Marinho (primary / institucional) */ --ca-azul-marinho-50: hsl(215 35% 97%); --ca-azul-marinho-100: hsl(215 34% 92%); --ca-azul-marinho-200: hsl(215 33% 82%); --ca-azul-marinho-300: hsl(215 32% 68%); --ca-azul-marinho-400: hsl(215 33% 52%); --ca-azul-marinho-500: hsl(215 34% 33%); /* base #385072 */ --ca-azul-marinho-600: hsl(215 38% 27%); --ca-azul-marinho-700: hsl(215 42% 21%); --ca-azul-marinho-800: hsl(215 44% 16%); --ca-azul-marinho-900: hsl(215 46% 11%); --ca-azul-marinho-950: hsl(215 48% 7%); /* Verde Piscina (saúde / success) */ --ca-verde-piscina-50: hsl(166 65% 96%); --ca-verde-piscina-100: hsl(166 68% 89%); --ca-verde-piscina-200: hsl(166 72% 78%); --ca-verde-piscina-300: hsl(166 80% 64%); --ca-verde-piscina-400: hsl(166 90% 50%); --ca-verde-piscina-500: hsl(166 100% 39%); /* base #00C596 */ --ca-verde-piscina-600: hsl(166 100% 33%); --ca-verde-piscina-700: hsl(166 100% 26%); --ca-verde-piscina-800: hsl(166 90% 20%); --ca-verde-piscina-900: hsl(166 80% 14%); --ca-verde-piscina-950: hsl(166 70% 8%); /* Azul Aço (secondary / info) */ --ca-azul-aco-50: hsl(196 50% 96%); --ca-azul-aco-100: hsl(196 52% 90%); --ca-azul-aco-200: hsl(196 53% 80%); --ca-azul-aco-300: hsl(196 54% 66%); --ca-azul-aco-400: hsl(196 55% 54%); --ca-azul-aco-500: hsl(196 55% 43%); --ca-azul-aco-600: hsl(196 58% 35%); --ca-azul-aco-700: hsl(196 60% 28%); --ca-azul-aco-800: hsl(196 55% 22%); --ca-azul-aco-900: hsl(196 50% 16%); --ca-azul-aco-950: hsl(196 45% 10%); /* Turquesa (accent) */ --ca-turquesa-50: hsl(178 50% 96%); --ca-turquesa-100: hsl(178 52% 90%); --ca-turquesa-200: hsl(178 50% 80%); --ca-turquesa-300: hsl(178 50% 68%); --ca-turquesa-400: hsl(178 50% 58%); --ca-turquesa-500: hsl(178 50% 50%); --ca-turquesa-600: hsl(178 55% 40%); --ca-turquesa-700: hsl(178 58% 32%); --ca-turquesa-800: hsl(178 52% 25%); --ca-turquesa-900: hsl(178 48% 18%); --ca-turquesa-950: hsl(178 44% 10%); /* Azul Aéreo (tertiary / focus) */ --ca-azul-aereo-50: hsl(200 60% 96%); --ca-azul-aereo-100: hsl(200 65% 90%); --ca-azul-aereo-200: hsl(200 70% 78%); --ca-azul-aereo-300: hsl(200 80% 62%); --ca-azul-aereo-400: hsl(200 90% 45%); --ca-azul-aereo-500: hsl(200 100% 28%); --ca-azul-aereo-600: hsl(200 100% 23%); --ca-azul-aereo-700: hsl(200 100% 18%); --ca-azul-aereo-800: hsl(200 90% 14%); --ca-azul-aereo-900: hsl(200 80% 10%); --ca-azul-aereo-950: hsl(200 70% 6%); /* Cinza neutro. Onda Auditoria DS CORR-5 (2026-05-25), B-02: a escala `--ca-cinza-*` quebra monocromatismo entre -500 e -600 (salto de matiz 215 deg -> 240 deg). Decisao historica consciente: o salto vem do projeto original e foi mantido na extracao para repo proprio em 1.21.2; rederivar para escala estritamente monocromatica impactaria 1.000+ usos cross-componentes. Caso brand decida migrar para monocromatismo estrito (matiz fixo 215 ou 240 em todos os stops), fica como onda dedicada futura com plano visual cuidadoso e validacao em suite de regressao visual. */ --ca-cinza-50: hsl(216 33% 97%); --ca-cinza-100: hsl(216 20% 94%); --ca-cinza-200: hsl(215 15% 87%); --ca-cinza-300: hsl(215 12% 75%); --ca-cinza-400: hsl(215 8% 60%); --ca-cinza-500: hsl(215 8% 45%); --ca-cinza-600: hsl(240 5% 32%); --ca-cinza-700: hsl(240 5% 25%); --ca-cinza-800: hsl(240 5% 18%); --ca-cinza-900: hsl(240 5% 12%); --ca-cinza-950: hsl(240 5% 7%); /* Status (warning e error vêm do DS; success/info reusam famílias) CORR-3 P-01: escalas extendidas para 50→950 completas (11 stops cada). success/info aliasam primitivos verde-piscina/azul-aço (decisão trivial); warning/error com valores derivados por interpolação visual (componentes H/S preservadas em -50 a -200; deslocam para tons escuros em -800+). --ca-success-700 PRESERVADO com valor próprio AA-safe (NÃO aliasar verde-piscina-700). */ /* Success */ --ca-success-50: var(--ca-verde-piscina-50); --ca-success-100: var(--ca-verde-piscina-100); /* CORR-3 P-01 */ --ca-success-200: var(--ca-verde-piscina-200); /* CORR-3 P-01 */ --ca-success-300: var(--ca-verde-piscina-300); /* CORR-3 P-01 */ --ca-success-400: var(--ca-verde-piscina-400); /* CORR-3 P-01 */ --ca-success-500: var(--ca-verde-piscina-500); --ca-success-600: var(--ca-verde-piscina-600); --ca-success-700: hsl(166 100% 22%); /* NOVO V1.1 — VALOR PRÓPRIO (não aliasa verde-piscina-700 porque este, em hsl 166 100% 26%, fica em 4.35:1 sobre success-50, abaixo do limiar AA 4.5:1). Este valor garante 5.73:1. */ --ca-success-800: var(--ca-verde-piscina-800); /* CORR-3 P-01 */ --ca-success-900: var(--ca-verde-piscina-900); /* CORR-3 P-01 */ --ca-success-950: var(--ca-verde-piscina-950); /* CORR-3 P-01 */ /* Warning */ --ca-warning-50: hsl(38 92% 95%); --ca-warning-100: hsl(38 92% 92%); /* CORR-3 P-01: interpolado entre -50 (95% L) e -200 (88% L) */ --ca-warning-200: hsl(38 92% 88%); /* Onda W2-D: borders/dividers de avisos suaves */ --ca-warning-300: hsl(38 92% 78%); /* CORR-3 P-01: interpolado entre -200 e -400 */ --ca-warning-400: hsl(38 92% 65%); /* CORR-3 P-01: interpolado entre -300 e -500 (50%) */ --ca-warning-500: hsl(38 92% 50%); --ca-warning-600: hsl(32 95% 44%); --ca-warning-700: hsl(32 85% 35%); /* NOVO V1.1 — texto forte sobre warning-50 (AA garantido) */ --ca-warning-800: hsl(28 75% 27%); /* CORR-3 P-01: continua trajetória H 38→32→28, S 92→85→75 */ --ca-warning-900: hsl(24 70% 20%); /* CORR-3 P-01: continua escurecendo, matiz mais rubro */ --ca-warning-950: hsl(20 65% 13%); /* CORR-3 P-01 */ /* Error */ --ca-error-50: hsl(0 72% 96%); --ca-error-100: hsl(0 72% 92%); /* CORR-3 P-01: interpolado entre -50 (96% L) e -200 */ --ca-error-200: hsl(0 72% 85%); /* CORR-3 P-01: interpolado */ --ca-error-300: hsl(0 72% 75%); /* CORR-3 P-01: interpolado */ --ca-error-400: hsl(0 72% 62%); /* CORR-3 P-01: interpolado entre -300 e -500 (51%) */ --ca-error-500: hsl(0 72% 51%); --ca-error-600: hsl(0 75% 42%); --ca-error-700: hsl(0 68% 38%); /* NOVO V1.1 — texto forte sobre error-50 (AA garantido) */ --ca-error-800: hsl(0 65% 30%); /* CORR-3 P-01: continua escurecendo */ --ca-error-900: hsl(0 60% 22%); /* CORR-3 P-01 */ --ca-error-950: hsl(0 55% 14%); /* CORR-3 P-01 */ /* Info */ --ca-info-50: var(--ca-azul-aco-50); --ca-info-100: var(--ca-azul-aco-100); /* CORR-3 P-01 */ --ca-info-200: var(--ca-azul-aco-200); /* CORR-3 P-01 */ --ca-info-300: var(--ca-azul-aco-300); /* CORR-3 P-01 */ --ca-info-400: var(--ca-azul-aco-400); /* CORR-3 P-01 */ --ca-info-500: var(--ca-azul-aco-500); --ca-info-600: var(--ca-azul-aco-600); --ca-info-700: var(--ca-azul-aco-700); /* NOVO V1.1 — texto forte sobre info-50 (AA garantido) */ --ca-info-800: var(--ca-azul-aco-800); /* CORR-3 P-01 */ --ca-info-900: var(--ca-azul-aco-900); /* CORR-3 P-01 */ --ca-info-950: var(--ca-azul-aco-950); /* CORR-3 P-01 */ /* Disabled (CORR-3 P-02): familia tokenizada para estados disabled de componentes. Centraliza padrao hoje espalhado ad-hoc. NOTA: --ca-opacity-disabled = 0.7 alinhado ao uso real existente em components.css (.casembrapa-consent-toggle__switch + .wf-newsletter__cta); auditoria propunha 0.5 (default mais agressivo), mas 0.7 e o padrao do projeto. bg/fg/border disponiveis para uso futuro em inputs/botoes que precisem disabled mais visual (hoje so opacity e cursor). */ --ca-color-disabled-bg: var(--ca-cinza-300); --ca-color-disabled-fg: var(--ca-cinza-500); --ca-color-disabled-border: var(--ca-cinza-200); --ca-opacity-disabled: 0.7; /* -------------------------------------------------------------------------- CORES SEMÂNTICAS — papéis (consumir estes em componentes novos) -------------------------------------------------------------------------- */ /* Onda 97.14: tokens canonicos para branco e preto puros, usados em constantes visuais nao-temaveis (selo ANS WCAG, timeline, orgchart, focus-visible em icones sociais). Definidos aqui (em vez de espalhar literais #fff/#000 em components/patterns) para consistencia + facilitar dark mode futuro (caso surja necessidade). */ --ca-color-white: #ffffff; --ca-color-black: #000000; --ca-color-surface: #ffffff; /* fundo de cards/seções claras */ --ca-color-surface-muted: var(--ca-azul-marinho-50); /* fundo institucional suave */ --ca-color-surface-subtle: var(--ca-cinza-50); /* shell/page bg */ --ca-color-surface-inverse: var(--ca-azul-marinho-500); /* header/footer escuros, CTAs */ --ca-color-surface-deep: var(--ca-azul-marinho-900); /* Onda 90: hero deep navy */ --ca-color-text: var(--ca-cinza-700); /* texto base */ --ca-color-text-strong: var(--ca-cinza-800); /* títulos */ --ca-color-text-muted: var(--ca-cinza-500); /* texto secundário */ --ca-color-text-soft: var(--ca-cinza-600); /* descrições */ --ca-color-text-on-inverse: var(--ca-color-white); /* texto sobre superfície escura (CORR-2 A-11: consome --ca-color-white da linha 148 em vez de duplicar #ffffff) */ --ca-color-text-link: var(--ca-azul-marinho-600); --ca-color-text-link-hover: var(--ca-azul-marinho-700); --ca-color-border: var(--ca-azul-marinho-200); --ca-color-border-strong: var(--ca-azul-marinho-300); --ca-color-border-muted: var(--ca-cinza-200); /* Onda Aderencia DS 100% (2026-05-27, D1): variante mais sutil que border-muted para icones-pill institucionais (.ca-portal-cta__icon, .wf-prefooter__icon, .wf-benefits__icon, .ca-icon-pill, .prest-tiss-grid__icon). 5 consumidores atuais antes referenciavam token inexistente e renderizavam com border-color = initial (currentColor por contexto). */ --ca-color-border-soft: var(--ca-azul-marinho-100); --ca-color-cta-bg: var(--ca-azul-marinho-500); --ca-color-cta-bg-hover: var(--ca-azul-marinho-600); --ca-color-cta-bg-active: var(--ca-azul-marinho-700); --ca-color-cta-fg: var(--ca-color-white); /* CORR-2 A-11: consome --ca-color-white em vez de duplicar #ffffff */ --ca-color-accent: var(--ca-verde-piscina-500); --ca-color-accent-soft: var(--ca-verde-piscina-50); --ca-color-label-bg: var(--ca-azul-marinho-100); --ca-color-label-fg: var(--ca-azul-marinho-700); /* -------------------------------------------------------------------------- CORES BRAND SOCIAL · Onda 97.1 Cores oficiais das redes sociais (brand guidelines de cada plataforma). Consumidas em :hover/:focus de .wf-social-icon--* no footer e em futuros CTAs sociais. X e WhatsApp adicionados preventivamente para evitar bump quando o markup aparecer (ex: card de fale conosco). -------------------------------------------------------------------------- */ --ca-social-facebook: #1877f2; --ca-social-instagram: #e1306c; --ca-social-linkedin: #0a66c2; --ca-social-youtube: #ff0000; --ca-social-x: #000000; --ca-social-whatsapp: #25d366; /* Cor do widget de chat Mosia (terceiro): teal hsl(179 45% 50%) = #47BAB8, medido ao vivo no widget flutuante do SDK. Usado apenas no estado de loading do balao (.wf-chat-bubble--loading), para a transicao casar com o widget Mosia quando ele assume. Cor de marca de terceiro, mesma natureza dos --ca-social-* (excecao declarada da REGRA 1). */ --ca-color-chat-loading: hsl(179 45% 50%); /* Largura da pilula "Inicializando" do balao de chat (alvo do morph). */ --ca-chat-bubble-loading-width: 12rem; /* -------------------------------------------------------------------------- EDITORIAL · Onda 77 (frontend-design "Editorial Institucional") Anchor memoravel: rule-accent vertical aplicado a section-labels e mega-menu headers. Anchor visual reconhecivel mesmo sem o logo. -------------------------------------------------------------------------- */ --ca-rule-accent-width: 2px; --ca-rule-accent-color: var(--ca-verde-piscina-600); --ca-rule-accent: var(--ca-rule-accent-width) solid var(--ca-rule-accent-color); --ca-color-text-cta: var(--ca-color-cta-bg); /* alias semantico, mesmo valor que cta-bg */ /* Onda Aderencia DS 100% (2026-05-27, D9): espessura canonica do rail accent vertical aplicado em callouts editoriais (.wf-callout, .prest-tiss-validator, .transp-fin-note, .prest-tiss-webservice, .ca-calc__error, .ca-calc__result, .casembrapa-rpa-disclaimer). 7+ consumidores antes usavam literal 4px; migrados nesta onda para consumir este token (= --ca-space-1 = 4px). */ --ca-rail-accent-width: var(--ca-space-1); /* 4px */ /* -------------------------------------------------------------------------- TIPOGRAFIA -------------------------------------------------------------------------- */ --ca-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --ca-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ca-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Onda 97.8: tipografia fluida com clamp() em headlines + lead. Resolve a mistura herdada (Onda 90 ja tinha display-hero/counter/percent fluidos + Onda 90.4 adicionou section-title-xl/2xl, mas h1-h4 + hero + lead ficaram fixos). Formula `clamp(min, Xvw, max)`: - min = ~80-85% do valor desktop (legivel em mobile sem auto-zoom iOS) - fluid = Xvw calculado para crossover em viewports intermediarios - max = valor desktop original (preserva aparencia em >= 1280px) Body, small, caption, overline mantidos fixos (corpo de leitura nao se beneficia de fluido). h5 e h6 mantidos fixos (mudanca <2px nao justifica complexidade clamp). */ --ca-text-hero: clamp(2.5rem, 5vw, 3.5rem); /* 40-56px */ /* Onda 90: escalas display fluidas para hero da Pesquisa de Satisfação */ --ca-text-display-hero: clamp(3rem, 6vw, 4.5rem); /* h1 hero (72px desktop) */ --ca-text-display-counter: clamp(7rem, 14vw, 13.75rem); /* contador "86" (220px desktop) */ --ca-text-display-percent: clamp(4rem, 8vw, 7.5rem); /* símbolo "%" (120px desktop) */ /* Onda 97.26 parte 4 (refator visual Direção C): tipografia display para stats institucionais da home (4 KPIs lado a lado). Range 64-128px dá peso editorial premium sem ocupar mais do que 1/4 do viewport por stat. */ --ca-text-display-stat: clamp(4rem, 11vw, 6.875rem); /* stats home (110px desktop) */ /* Onda 90.4: títulos H2 premium das 8 dobras (não confundir com --ca-text-h2 que é o título legacy de 32px). Aplicar via .wf-section-title--xl/--2xl. */ --ca-text-section-title-xl: clamp(1.875rem, 4vw, 3rem); /* 30-48px (dobras 2-7) */ --ca-text-section-title-2xl: clamp(2.25rem, 5vw, 3.5rem); /* 36-56px (dobra 8) */ --ca-text-h1: clamp(2rem, 4vw, 2.5rem); /* 32-40px (Onda 97.8) */ --ca-text-h2: clamp(1.625rem, 3vw, 2rem); /* 26-32px (Onda 97.8) */ --ca-text-h3: clamp(1.25rem, 2.4vw, 1.5rem); /* 20-24px (Onda 97.8) */ --ca-text-h4: clamp(1.125rem, 2vw, 1.25rem); /* 18-20px (Onda 97.8) */ --ca-text-h5: 1.125rem; /* 18px - fixo (mudanca <2px nao justifica clamp) */ --ca-text-h6: 1rem; /* 16px - fixo (= --ca-text-body) */ --ca-text-lead: clamp(1.125rem, 1.8vw, 1.25rem); /* 18-20px (Onda 97.8) */ --ca-text-body: 1rem; /* 16px - fixo (corpo de leitura, evita iOS auto-zoom) */ --ca-text-small: 0.875rem; /* 14px - fixo (corpo) */ --ca-text-caption: 0.75rem; /* 12px - fixo (corpo) */ --ca-text-overline: 0.6875rem;/* 11px - fixo (corpo) */ /* Onda Auditoria DS CORR-3 (2026-05-25), M-04: --ca-leading-none cobre o padrao CSS de centralizacao vertical de glyph (icones inline, badges, numeros de step, chips ->). Distinto de --ca-leading-tight (1.1) que se aplica a texto. line-height: 0 (3 ocorrencias em components.css) MANTIDO literal com comentario porque tem proposito distinto: colapsar espaco entre flex children, nao centralizar glyph. */ --ca-leading-display: 1.05; --ca-leading-none: 1; --ca-leading-tight: 1.1; --ca-leading-snug: 1.25; --ca-leading-normal: 1.5; --ca-leading-relaxed: 1.6; /* Onda Auditoria DS CORR-4 (2026-05-25), DSC.1.5: --ca-leading-double atende WCAG 1.4.12 Espacamento de Texto (line-height >= 1.5x) em casos idiomaticos de demo a11y "ampliado" onde 1.5 nao basta. Uso muito restrito (preview do widget A-/A/A+); manter sob risco de uso indevido em corpo de leitura. --ca-leading-display (1.05) atende hero titles com tracking ultra-negativo (Direcao B / hero da home Onda 86+). */ --ca-leading-double: 2; --ca-tracking-tight: -0.01em; --ca-tracking-normal: 0; --ca-tracking-wide: 0.02em; --ca-tracking-wider: 0.04em; --ca-tracking-widest: 0.08em; /* Onda 97.25 (Direção B): tracking ultra negativo para tipografia display editorial (clamp display-hero em hero institucional). Evoca densidade tipográfica de Wall Street Journal e Mayo Clinic em headlines grandes. */ --ca-tracking-display: -0.03em; --ca-weight-regular: 400; --ca-weight-medium: 500; --ca-weight-semibold: 600; --ca-weight-bold: 700; --ca-weight-extrabold: 800; /* -------------------------------------------------------------------------- ESPAÇAMENTO — escala 4px base -------------------------------------------------------------------------- */ --ca-space-1: 0.25rem; /* 4px */ --ca-space-2: 0.5rem; /* 8px */ --ca-space-3: 0.75rem; /* 12px */ --ca-space-4: 1rem; /* 16px */ --ca-space-5: 1.25rem; /* 20px */ --ca-space-6: 1.5rem; /* 24px */ --ca-space-7: 1.75rem; /* 28px */ --ca-space-8: 2rem; /* 32px */ --ca-space-9: 2.25rem; /* 36px - Onda Aderencia DS 100% (2026-05-27, D2): completa escala 4px-base contigua na faixa <32px. 3 consumidores legados (chip "Acessar -->" do hero-prime mobile + margin do contador WCAG da pagina /acessibilidade/) antes referenciavam este token inexistente e renderizavam com initial. */ --ca-space-10: 2.5rem; /* 40px */ --ca-space-12: 3rem; /* 48px */ --ca-space-14: 3.5rem; /* 56px */ --ca-space-16: 4rem; /* 64px */ --ca-space-20: 5rem; /* 80px */ --ca-space-24: 6rem; /* 96px */ /* Onda 97.25 (Direção B): tokens semânticos para espaçamento entre seções em páginas institucionais. Hero da home e Quem Somos ganham respiração ampliada (FGV/Einstein-like). Páginas operacionais (Área do Beneficiário) mantêm density-md. */ --ca-space-section-md: var(--ca-space-12); /* 48px, density operacional */ --ca-space-section-lg: var(--ca-space-16); /* 64px, density institucional */ --ca-space-section-xl: var(--ca-space-20); /* 80px, hero institucional */ /* Onda 97.5.3: tap target minimo (WCAG 2.5.5 + Apple HIG). Use max(rem, px) para respeitar user font-size scaling (1rem cresce; 44px nao) sem cair abaixo de 44px fisicos. Aplicar em qualquer botao interativo compacto (icon-only, pills, etc). */ --ca-tap-target-min: max(2.75rem, 44px); /* -------------------------------------------------------------------------- Onda 97.7: tokens semanticos para os breakpoints legacy mais usados (30/35/45/51em = 480/560/720/820px), 51 ocorrencias no total. Sao valores intermediarios herdados das ondas 0-96 que nao se encaixam nos 3 breakpoints canonicos sm/md/lg, mas estao consolidados no codigo suficientemente para merecer nome proprio. Mantidos como em-units (mesma convencao dos sm/md/lg) e com semantica explicita. Limitacao da spec CSS: Custom Properties nao funcionam dentro de @media, entao o uso continua sendo literal em-units com comentario referenciando o token (ex: `@media (min-width: 30em) /* var(--ca-bp-xs) */`). Os tokens existem aqui para documentacao + facilitar refator futuro (busca/troca em massa) + lint. */ --ca-bp-xs: 30em; /* 480px - cards extra-pequenos, layouts portrait minimos */ --ca-bp-sm-low: 35em; /* 560px - intermediario abaixo de --ca-bp-sm */ --ca-bp-sm-mid: 32.5em;/* 520px - Onda Aderencia DS 100% (D4): cobre layout calc retiree-fields em .ca-calc__fields--retiree */ --ca-bp-tablet: 45em; /* 720px - mobile -> tablet padrao do projeto (mais usado) */ --ca-bp-tablet-wide: 51em; /* 820px - tablet largo / pequeno desktop */ --ca-bp-md-low: 55em; /* 880px - Onda Aderencia DS 100% (D4): cobre hero 2-col (.transp-hero, .prest-hero, .prest-tiss-grid) */ --ca-bp-md-mid: 60em; /* 960px - Onda Aderencia DS 100% (D4): cobre 3-col inline do .ca-portal-cta */ --ca-bp-lg-low: 75em; /* 1200px - Onda Aderencia DS 100% (D4): cobre progressive enhancement do header utility cluster (.font-tools, .internal-link) */ /* -------------------------------------------------------------------------- ÍCONES (Onda 94) — escala semântica derivada da scale de espaçamento. Consumida por svg.ca-icon e modifiers ca-icon--. Cor herda currentColor por padrão; o helper PHP emite stroke="currentColor". -------------------------------------------------------------------------- */ --ca-icon-size-xs: var(--ca-space-4); /* 16px */ --ca-icon-size-sm: var(--ca-space-5); /* 20px */ --ca-icon-size-md: var(--ca-space-6); /* 24px */ --ca-icon-size-lg: var(--ca-space-8); /* 32px */ --ca-icon-size-xl: var(--ca-space-10); /* 40px */ --ca-icon-size-2xl: var(--ca-space-12); /* 48px */ --ca-icon-size-3xl: var(--ca-space-14); /* 56px */ --ca-icon-color: currentColor; /* -------------------------------------------------------------------------- RAIOS DE BORDA — em px (visual fixo, não escala com font-size) Onda Auditoria DS CORR-3 (2026-05-25), M-06. Decisão arquitetural: radius é propriedade visual que NÃO deve escalar com o controle A-/A/A+ do usuário em --ca-color-text-* + acessibilidade. Spacing (em rem) escala com font-size do root; radius permanece estável. Mantém harmonia visual mesmo com texto ampliado (caso contrário, um botão com texto grande teria raio gigante, quebrando layout). Sem token --ca-radius-* em rem proposital. -------------------------------------------------------------------------- */ --ca-radius-none: 0; --ca-radius-sm: 6px; --ca-radius-md: 10px; --ca-radius-lg: 16px; --ca-radius-xl: 20px; --ca-radius-2xl: 24px; /* Onda 90: cards premium */ --ca-radius-3xl: 28px; /* Onda 90: cards extra-grandes */ --ca-radius-pill: 999px; /* -------------------------------------------------------------------------- SOMBRAS — todas baseadas em azul-marinho-500 com opacidade variável -------------------------------------------------------------------------- */ --ca-shadow-xs: 0 1px 2px hsl(215 34% 33% / 0.06); --ca-shadow-sm: 0 2px 6px hsl(215 34% 33% / 0.08); --ca-shadow-md: 0 6px 16px hsl(215 34% 33% / 0.10); /* Onda Auditoria DS CORR-3 (2026-05-25), M-07: --ca-shadow-soft é alias semântico (não tamanho dentro da escala xs/sm/md/lg/xl). Reservado para "ênfase suave em hover" entre -md e -lg. Decisão Opção B da auditoria (manter como alias). Não renomear por custo de migração desproporcional. */ --ca-shadow-soft: 0 10px 30px hsl(215 34% 33% / 0.12); --ca-shadow-lg: 0 12px 24px -4px hsl(215 34% 33% / 0.12); --ca-shadow-xl: 0 24px 48px -8px hsl(215 34% 33% / 0.16); /* Onda W2-D: drop-shadow específica para o pin do mapa institucional. */ --ca-shadow-pin: 0 2px 4px hsl(0 0% 0% / 0.30); /* Editorial · Onda 77: sombra plana deslocada (paper-over-paper), aplicada em .wf-card--editorial. Cria sensacao tatil sem competir com a sombra padrao .wf-card. Cor azul-marinho-100 = paleta DS. */ --ca-shadow-editorial: 4px 4px 0 var(--ca-azul-marinho-100); /* Onda Aderencia DS 100% (2026-05-27, D6): par de --ca-shadow-editorial para o estado hover de .wf-card--editorial. Offset 6x6 (em vez de 4x4) e intensidade -200 (em vez de -100) cria lift visual editorial sem dramaticidade. Espelha padrao --ca-shadow-premium / -premium-hover. */ --ca-shadow-editorial-hover: 6px 6px 0 var(--ca-azul-marinho-200); /* Onda 90: sombras premium para cards do redesign da Pesquisa de Satisfação. Lift mais sutil que --ca-shadow-soft, com hover bem mais alto. */ --ca-shadow-premium: 0 10px 40px -10px hsl(215 46% 11% / 0.08); --ca-shadow-premium-hover: 0 20px 40px -10px hsl(215 46% 11% / 0.15); --ca-shadow-glass: 0 8px 32px 0 hsl(0 0% 0% / 0.20); --ca-shadow-glow-primary: 0 0 20px hsl(215 34% 33% / 0.30); /* Onda 97.25 (Direção B): sombra editorial profunda para hero da home e cards premium de páginas institucionais. Mais profundidade que --ca-shadow-premium (necessária para o layout split-column do hero da home com peso editorial), mantém suavidade institucional sem dramaticidade. Cor base azul-marinho-900 escuro com opacidade baixa para preservar tom sóbrio em contexto branco. */ --ca-shadow-editorial-deep: 0 24px 64px -16px hsl(215 46% 11% / 0.16); /* -------------------------------------------------------------------------- ACENTOS TRANSLÚCIDOS — usados em hero/CTA full-bleed sobre fundos escuros -------------------------------------------------------------------------- */ /* Onda W2-D: substitui hsl() literais em .ca-portal-cta (radial-gradients, icon background, icon border). Mantemos a família verde-piscina já registrada. */ --ca-color-accent-glow-soft: hsl(166 100% 39% / 0.10); --ca-color-accent-glow-medium: hsl(166 100% 50% / 0.16); --ca-color-accent-bg-soft: hsl(166 100% 39% / 0.18); --ca-color-accent-border-soft: hsl(166 100% 50% / 0.32); /* Onda 89: superfícies translúcidas sobre fundo escuro (hero cover, banners institucionais). Branco puro com alphas variáveis para borda, hover-fill e foco do CTA .wf-btn--ghost-light. */ --ca-color-on-inverse-border-soft: hsl(0 0% 100% / 0.5); --ca-color-on-inverse-border-strong: hsl(0 0% 100% / 0.85); --ca-color-on-inverse-bg-subtle: hsl(0 0% 100% / 0.065); /* highlight ultra-sutil de nav sobre header escuro */ --ca-color-on-inverse-bg-soft: hsl(0 0% 100% / 0.12); /* -------------------------------------------------------------------------- TRANSIÇÕES — durações e easings -------------------------------------------------------------------------- */ --ca-duration-fast: 150ms; --ca-duration-base: 220ms; --ca-duration-slow: 320ms; --ca-duration-counter: 2500ms; /* Onda 90: contador animado 0→86 do hero */ --ca-stagger-step: 80ms; /* Onda 92: incremento entre filhos em cascata */ --ca-stagger-init: 240ms; /* Onda 92: delay inicial antes da primeira onda de cards */ --ca-easing-standard: cubic-bezier(0.2, 0, 0.0, 1); --ca-easing-out: cubic-bezier(0.16, 1, 0.3, 1); --ca-easing-in: cubic-bezier(0.7, 0, 0.84, 0); --ca-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------------------------- FOCO (acessibilidade) -------------------------------------------------------------------------- */ --ca-focus-ring-color: hsl(200 100% 28% / 0.32); --ca-focus-ring: 0 0 0 3px var(--ca-focus-ring-color); /* -------------------------------------------------------------------------- Z-INDEX -------------------------------------------------------------------------- */ /* Onda Auditoria DS CORR-3 (2026-05-25), M-08: --ca-z-base: 0 é redundante em CSS puro (0 é default de qualquer elemento) mas mantido pelo valor pedagógico: completa a escada base/dropdown/sticky/overlay/modal/toast num único bloco coerente. Custo zero, benefício documental. Decisão Opção A da auditoria. */ --ca-z-base: 0; --ca-z-dropdown: 10; --ca-z-sticky: 20; --ca-z-overlay: 30; --ca-z-modal: 40; --ca-z-toast: 50; /* -------------------------------------------------------------------------- LAYOUT — larguras do shell em px (visual fixo, não escala com font-size) Onda Auditoria DS CORR-3 (2026-05-25), M-06. Mesma razão que radius: largura do shell é propriedade de layout ESTRUTURAL, não deve escalar com o controle de fonte do usuário. Conteúdo dentro do shell pode escalar (rem-based em tipografia, espaçamento); o shell em si fica fixo para garantir grid e quebra de linha previsíveis. -------------------------------------------------------------------------- */ --ca-content-width: 1180px; --ca-wide-width: 1360px; --ca-shell-width: 1180px; /* alinhado ao theme.json contentSize */ /* Gutter mínimo do shell, fluido e mobile-first: cresce suave de --ca-space-5 (20px, celular estreito) até --ca-space-8 (32px, tablet), sem nenhuma media query. O termo 4vw cruza 20px aos ~500px e 32px aos ~800px de viewport (fora desse intervalo o clamp trava no min/max). Precedente de vw em token: --ca-hero-min-height (clamp 18vw). */ --ca-shell-gutter-min: clamp(var(--ca-space-5), 4vw, var(--ca-space-8)); /* "Full-bleed parent, contained content": containers top-level ocupam 100% da viewport, mas o conteúdo interno fica centralizado e limitado a --ca-shell-width. O padding lateral é, no mínimo, --ca-shell-gutter-min (fluido 20px→32px); em telas maiores que o shell, cresce dinamicamente para criar o gutter que centra o conteúdo. Aplicado mobile-first SEM media query: a fórmula max()/calc() já é intrinsecamente responsiva (abaixo do shell resolve para o piso fluido; acima, centra a 1180px). */ --ca-shell-padding-inline: max(var(--ca-shell-gutter-min), calc((100% - var(--ca-shell-width)) / 2)); /* -------------------------------------------------------------------------- BREAKPOINTS · Onda 97.1 Substituem os 14 valores arbitrários do legado (480, 521, 560, 600, 640, 720, 721, 820, 880, 920, 960, 1023, 1024, 1100). Em em-units para respeitar font-size do usuário (a11y). ATENÇÃO: CSS Custom Properties NÃO funcionam dentro de @media (limitação atual da especificação CSS). Solução: documentar valores aqui + usar literais nos @media com COMENTÁRIO referenciando o token. Exemplo: @media (min-width: 64em) / * var(--ca-bp-md) — desktop * / { ... } A inversão dos 45 @media (max-width:) legacy para os 3 valores abaixo acontece nas Fases 2 e 3 do STANDARDIZATION_ROADMAP.md (Ondas 97.2-97.3). Esta onda só DEFINE os tokens. -------------------------------------------------------------------------- */ --ca-bp-sm: 40em; /* 640px, tablet pequeno (a partir de) */ --ca-bp-md: 64em; /* 1024px, desktop pequeno (a partir de) */ --ca-bp-lg: 80em; /* 1280px, desktop largo (a partir de) */ /* -------------------------------------------------------------------------- HERO COVER (Onda 89) — altura imponente e overlay para texto sobre foto -------------------------------------------------------------------------- Tokens consumidos por .wf-hero-cover (patterns.css), o primeiro hero full-bleed com background-image do projeto. Usado por padrão na página /pesquisa-de-satisfacao/, reutilizável em futuras páginas editoriais. --ca-hero-min-height: clamp() escala fluidamente entre mobile (~26rem) e desktop (~32rem), sem media-query, mantendo respiro WCAG (target tap, leitura confortável do título em escala --ca-text-hero). --ca-hero-overlay: linear-gradient escuro top→bottom sobre a imagem, garantindo contraste WCAG AA do texto branco mesmo em fotos de tons médios. Cor base alinhada a azul-marinho-900 da paleta DS (mesmo H/S/L). */ --ca-hero-min-height: clamp(26rem, 18rem + 18vw, 32rem); --ca-hero-overlay: linear-gradient( 180deg, hsl(215 46% 11% / 0.45) 0%, hsl(215 46% 11% / 0.78) 100% ); /* -------------------------------------------------------------------------- ALIASES LEGACY (--wf-*) — todas as classes .wf-* atuais consomem estes. NÃO ADICIONAR novos --wf-*. Em código novo, use --ca-* diretamente. -------------------------------------------------------------------------- */ --wf-bg: var(--ca-color-surface-subtle); --wf-page: var(--ca-color-surface); --wf-text: var(--ca-color-text); --wf-muted: var(--ca-color-text-muted); --wf-line: var(--ca-color-border); --wf-soft: var(--ca-color-surface-muted); --wf-accent: var(--ca-color-accent); --wf-dark: var(--ca-color-cta-bg); --wf-dark-2: var(--ca-azul-marinho-700); --wf-radius: var(--ca-radius-md); --wf-shell-width: var(--ca-shell-width); --wf-shadow: var(--ca-shadow-soft); } /* ---------------------------------------------------------------------------- Acessibilidade — escala de fonte controlada pelo usuário (A- / A / A+) Aplicada via [data-ca-font-scale] no . Como tudo no DS usa rem/em relativos, alterar o font-size raiz escala todo o sistema tipográfico. ---------------------------------------------------------------------------- */ :root { --ca-font-scale-small: 87.5%; --ca-font-scale-normal: 100%; --ca-font-scale-large: 112.5%; } :root[data-ca-font-scale="small"] { font-size: var(--ca-font-scale-small); } :root[data-ca-font-scale="normal"] { font-size: var(--ca-font-scale-normal); } :root[data-ca-font-scale="large"] { font-size: var(--ca-font-scale-large); } /* ---------------------------------------------------------------------------- Acessibilidade — modo de alto contraste (toggle via Alt+5). Override de tokens semânticos para preto/branco/amarelo institucional. Ativado via [data-ca-contrast="high"] no . Valores absolutos por natureza (alto contraste exige cores extremas, não escala paleta DS). ---------------------------------------------------------------------------- */ :root { --ca-color-hc-bg: var(--ca-color-white); /* CORR-2 A-11: consome --ca-color-white em vez de hsl(0 0% 100%) literal */ --ca-color-hc-fg: var(--ca-color-black); /* CORR-2 A-11: consome --ca-color-black em vez de hsl(0 0% 0%) literal */ --ca-color-hc-accent: hsl(54 100% 35%); --ca-color-hc-link: hsl(217 100% 35%); --ca-color-hc-border: var(--ca-color-black); /* CORR-2 A-11 (extensão): consome --ca-color-black, consistente com hc-fg na linha 540 */ } :root[data-ca-contrast="high"] { --ca-color-surface: var(--ca-color-hc-bg); --ca-color-surface-muted: var(--ca-color-hc-bg); --ca-color-surface-subtle: var(--ca-color-hc-bg); --ca-color-surface-inverse: var(--ca-color-hc-fg); --ca-color-text: var(--ca-color-hc-fg); --ca-color-text-strong: var(--ca-color-hc-fg); --ca-color-text-soft: var(--ca-color-hc-fg); --ca-color-text-muted: var(--ca-color-hc-fg); --ca-color-text-on-inverse: var(--ca-color-hc-bg); --ca-color-text-link: var(--ca-color-hc-link); --ca-color-text-link-hover: var(--ca-color-hc-link); --ca-color-cta-bg: var(--ca-color-hc-fg); --ca-color-cta-bg-hover: var(--ca-color-hc-fg); --ca-color-cta-bg-active: var(--ca-color-hc-fg); --ca-color-cta-fg: var(--ca-color-hc-bg); --ca-color-accent: var(--ca-color-hc-accent); --ca-color-accent-soft: var(--ca-color-hc-bg); --ca-color-border: var(--ca-color-hc-border); --ca-color-border-strong: var(--ca-color-hc-border); --ca-color-border-muted: var(--ca-color-hc-border); } :root[data-ca-contrast="high"] img, :root[data-ca-contrast="high"] svg:not([class*="logo"]) { filter: contrast(1.15); } /* Acessibilidade global: respeitar usuários que pedem motion reduzido */ @media (prefers-reduced-motion: reduce) { :root { --ca-duration-fast: 0ms; --ca-duration-base: 0ms; --ca-duration-slow: 0ms; } } /* ---------------------------------------------------------------------------- Overlays sobre azul-marinho (CTA) com fallback Safari < 16.2 -------------------------------------------------------------------------- Tokens consumidos por components.css onde antes havia color-mix() inline. Os valores fallback usam hsla() com o mesmo H/S/L do azul-marinho-500 (hsl(215 34% 33%)) e A correspondente à porcentagem de mistura. O bloco @supports sobrescreve com color-mix() quando o navegador tem suporte nativo (Chrome 111+, Safari 16.2+, Firefox 113+), garantindo paridade visual moderna sem regredir Safari iOS legado. ---------------------------------------------------------------------------- */ :root { --ca-overlay-cta-04: hsla(215, 34%, 33%, 0.04); --ca-overlay-cta-14: hsla(215, 34%, 33%, 0.14); --ca-overlay-cta-18: hsla(215, 34%, 33%, 0.18); --ca-overlay-cta-45: hsla(215, 34%, 33%, 0.45); --ca-overlay-cta-60: hsla(215, 34%, 33%, 0.6); } @supports (color: color-mix(in srgb, white, black)) { :root { --ca-overlay-cta-04: color-mix(in srgb, var(--ca-color-cta-bg) 4%, transparent); --ca-overlay-cta-14: color-mix(in srgb, var(--ca-color-cta-bg) 14%, transparent); --ca-overlay-cta-18: color-mix(in srgb, var(--ca-color-cta-bg) 18%, transparent); --ca-overlay-cta-45: color-mix(in srgb, var(--ca-color-cta-bg) 45%, transparent); --ca-overlay-cta-60: color-mix(in srgb, var(--ca-color-cta-bg) 60%, transparent); } } /* ---------------------------------------------------------------------------- Overlays glass do hero (accent + surface + text-on-inverse) com fallback Safari < 16.2 -------------------------------------------------------------------------- Tokens consumidos por patterns.css onde antes havia color-mix() inline no .wf-hero-prime__card (border + background + inset highlights + pilula do icone + cor da hint). Fallbacks usam hsla() com o mesmo H/S/L do token-fonte (--ca-color-accent aliasa --ca-verde-piscina-500 = hsl(166 100% 39%); --ca-color-surface = --ca-color-text-on-inverse = hsl(0 0% 100%)) e A correspondente a porcentagem de mistura. O bloco @supports sobrescreve com color-mix() quando o navegador tem suporte nativo (Chrome 111+, Safari 16.2+, Firefox 113+), garantindo paridade visual moderna sem regredir Safari iOS legado. Espelha o padrao dos --ca-overlay-cta-* (Onda 97.14). Onda Auditoria DS CORR-1 (2026-05-25), correcao C-04. ---------------------------------------------------------------------------- */ :root { --ca-overlay-accent-22: hsla(166, 100%, 39%, 0.22); --ca-overlay-accent-60: hsla(166, 100%, 39%, 0.6); --ca-overlay-surface-10: hsla(0, 0%, 100%, 0.1); --ca-overlay-surface-16: hsla(0, 0%, 100%, 0.16); --ca-overlay-surface-40: hsla(0, 0%, 100%, 0.4); --ca-overlay-surface-50: hsla(0, 0%, 100%, 0.5); --ca-overlay-text-on-inverse-80: hsla(0, 0%, 100%, 0.8); /* Onda Aderencia DS 100% (2026-05-27, D5): glow blur do mockup celular em .wf-mobile-app__glow. Substitui color-mix() inline em components.css pelo padrao consolidado Onda 97.14 + CORR-1 + CORR-2 (hsla() fallback + @supports color-mix), garantindo paridade visual em Safari iOS < 16.2. Base color: --ca-azul-aereo-500 = hsl(200 100% 28%). */ --ca-overlay-glow-15: hsla(200, 100%, 28%, 0.15); } @supports (color: color-mix(in srgb, white, black)) { :root { --ca-overlay-accent-22: color-mix(in srgb, var(--ca-color-accent) 22%, transparent); --ca-overlay-accent-60: color-mix(in srgb, var(--ca-color-accent) 60%, transparent); --ca-overlay-surface-10: color-mix(in srgb, var(--ca-color-surface) 10%, transparent); --ca-overlay-surface-16: color-mix(in srgb, var(--ca-color-surface) 16%, transparent); --ca-overlay-surface-40: color-mix(in srgb, var(--ca-color-surface) 40%, transparent); --ca-overlay-surface-50: color-mix(in srgb, var(--ca-color-surface) 50%, transparent); --ca-overlay-text-on-inverse-80: color-mix(in srgb, var(--ca-color-text-on-inverse) 80%, transparent); --ca-overlay-glow-15: color-mix(in srgb, var(--ca-azul-aereo-500) 15%, transparent); } } /* ---------------------------------------------------------------------------- Overlays adicionais (CORR-2): on-inverse hover + deep navy-900 -------------------------------------------------------------------------- --ca-color-on-inverse-bg-medium: branco 20% para hover em fundos escuros (consome --ca-color-text-on-inverse = hsl(0 0% 100%)). --ca-overlay-deep-04 e --ca-overlay-deep-25: navy-900 com alpha; pareia com --ca-overlay-cta-* da Onda 97.14, mas com tom mais profundo (azul-marinho-900 vs azul-marinho-500 do CTA). Padrao de fallback hsla + @supports color-mix identico aos --ca-overlay-cta-*. Onda Auditoria DS CORR-2 (2026-05-25), correcoes A-02 + A-03. ---------------------------------------------------------------------------- */ :root { --ca-color-on-inverse-bg-medium: hsla(0, 0%, 100%, 0.2); --ca-overlay-deep-04: hsla(215, 46%, 11%, 0.04); --ca-overlay-deep-06: hsla(215, 46%, 11%, 0.06); --ca-overlay-deep-25: hsla(215, 46%, 11%, 0.25); /* Onda Camera (2026-05-30): scrims/guia do overlay de leitura por camera. Mesmo padrao navy-900 + alpha; cobre a banda escura do guia e os gradientes de legibilidade do texto branco sobre o video. */ --ca-overlay-deep-45: hsla(215, 46%, 11%, 0.45); --ca-overlay-deep-60: hsla(215, 46%, 11%, 0.6); } @supports (color: color-mix(in srgb, white, black)) { :root { --ca-color-on-inverse-bg-medium: color-mix(in srgb, var(--ca-color-text-on-inverse) 20%, transparent); --ca-overlay-deep-04: color-mix(in srgb, var(--ca-azul-marinho-900) 4%, transparent); --ca-overlay-deep-06: color-mix(in srgb, var(--ca-azul-marinho-900) 6%, transparent); --ca-overlay-deep-25: color-mix(in srgb, var(--ca-azul-marinho-900) 25%, transparent); --ca-overlay-deep-45: color-mix(in srgb, var(--ca-azul-marinho-900) 45%, transparent); --ca-overlay-deep-60: color-mix(in srgb, var(--ca-azul-marinho-900) 60%, transparent); } }