/* ============================================================ KIT UNIVERSAL · pacotes.css · v1.19.1 — 2026-09-24 GERADO por ferramentas/gerar.mjs a partir do pacotes.json e da medição ferramentas/medidas-tipografia.json. ⛔ NÃO EDITE À MÃO. Um programa veste três palavras na raiz: e carrega a fonte pela 'carga' do pacote (comentário de cada bloco). Claro/escuro por light-dark() (Baseline 2024-05-13); navegador sem suporte recebe o claro e o escuro por @media/atributo — reserva integral. Os papéis DERIVADOS (--texto-2-pequeno, --link-texto, --acao-texto, --foco, --sobre-ok, --sobre-aviso-seguro, --sobre-erro, --*-fio, --borda-campo, --acao-texto-min) são calculados pelo gerador com a fórmula de contraste WCAG 2 — contraste por CONSTRUÇÃO: o componente consome o derivado e nunca reprova, e a matriz publica o que reprovou. ============================================================ */ /* ======================= COR · 6 pacotes ======================= */ /* ---- 01 · Monocromo de produto — Geist · Vercel · https://vercel.com/geist/colors (lida 2026-09) ---- */ [data-pacote-cor="geist"] { --fundo: #FFFFFF; --superficie: #FAFAFA; --componente: #F2F2F2; --borda: #EBEBEB; --borda-2: #C9C9C9; --texto: #171717; --texto-2: #4D4D4D; --acao: #0072F5; --acao-hover: #0062D1; --sobre-acao: #FFFFFF; --link: #0068D6; --ok: #398E4A; --aviso: #FF990A; --sobre-aviso: #FFFFFF; --erro: #DA2F35; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #4D4D4D; --link-texto: #0068D6; --acao-texto: #171717; --foco: #0072F5; --sobre-ok: #000000; --sobre-aviso-seguro: #171717; --sobre-erro: #FFFFFF; --ok-fio: #398E4A; --aviso-fio: #4D4D4D; --erro-fio: #DA2F35; --borda-campo: #4D4D4D; --acao-texto-min: 19px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ --acao-texto-peso: 700; /* negrito de verdade (1.4.3 texto grande) — o peso forte do pacote de tipo pode ser < 700 */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="geist"] { --fundo: light-dark(#FFFFFF, #0A0A0A); --superficie: light-dark(#FAFAFA, #000000); --componente: light-dark(#F2F2F2, #1A1A1A); --borda: light-dark(#EBEBEB, #2E2E2E); --borda-2: light-dark(#C9C9C9, #454545); --texto: light-dark(#171717, #EDEDED); --texto-2: light-dark(#4D4D4D, #A1A1A1); --acao: light-dark(#0072F5, #0072F5); --acao-hover: light-dark(#0062D1, #0062D1); --sobre-acao: light-dark(#FFFFFF, #FFFFFF); --link: light-dark(#0068D6, #52A8FF); --ok: light-dark(#398E4A, #398E4A); --aviso: light-dark(#FF990A, #FF990A); --sobre-aviso: light-dark(#FFFFFF, #FFFFFF); --erro: light-dark(#DA2F35, #D93036); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#4D4D4D, #A1A1A1); --link-texto: light-dark(#0068D6, #52A8FF); --acao-texto: light-dark(#171717, #EDEDED); --foco: light-dark(#0072F5, #0072F5); --sobre-ok: light-dark(#000000, #0A0A0A); --sobre-aviso-seguro: light-dark(#171717, #0A0A0A); --sobre-erro: light-dark(#FFFFFF, #FFFFFF); --ok-fio: light-dark(#398E4A, #398E4A); --aviso-fio: light-dark(#4D4D4D, #FF990A); --erro-fio: light-dark(#DA2F35, #D93036); --borda-campo: light-dark(#4D4D4D, #A1A1A1); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="geist"], :root:not([data-theme="light"]) [data-pacote-cor="geist"]:not([data-theme="light"]) { --fundo: #0A0A0A; --superficie: #000000; --componente: #1A1A1A; --borda: #2E2E2E; --borda-2: #454545; --texto: #EDEDED; --texto-2: #A1A1A1; --acao: #0072F5; --acao-hover: #0062D1; --sobre-acao: #FFFFFF; --link: #52A8FF; --ok: #398E4A; --aviso: #FF990A; --sobre-aviso: #FFFFFF; --erro: #D93036; --texto-2-pequeno: #A1A1A1; --link-texto: #52A8FF; --acao-texto: #EDEDED; --foco: #0072F5; --sobre-ok: #0A0A0A; --sobre-aviso-seguro: #0A0A0A; --sobre-erro: #FFFFFF; --ok-fio: #398E4A; --aviso-fio: #FF990A; --erro-fio: #D93036; --borda-campo: #A1A1A1; } } [data-theme="dark"][data-pacote-cor="geist"], [data-theme="dark"] [data-pacote-cor="geist"], [data-pacote-cor="geist"] [data-theme="dark"] { --fundo: #0A0A0A; --superficie: #000000; --componente: #1A1A1A; --borda: #2E2E2E; --borda-2: #454545; --texto: #EDEDED; --texto-2: #A1A1A1; --acao: #0072F5; --acao-hover: #0062D1; --sobre-acao: #FFFFFF; --link: #52A8FF; --ok: #398E4A; --aviso: #FF990A; --sobre-aviso: #FFFFFF; --erro: #D93036; --texto-2-pequeno: #A1A1A1; --link-texto: #52A8FF; --acao-texto: #EDEDED; --foco: #0072F5; --sobre-ok: #0A0A0A; --sobre-aviso-seguro: #0A0A0A; --sobre-erro: #FFFFFF; --ok-fio: #398E4A; --aviso-fio: #FF990A; --erro-fio: #D93036; --borda-campo: #A1A1A1; } } /* ---- 02 · Areia e bronze — Radix Colors · WorkOS · https://www.radix-ui.com/colors (lida 2026-09) ---- */ [data-pacote-cor="radix"] { --fundo: #FDFDFC; --superficie: #F9F9F8; --componente: #F1F0EF; --borda: #DAD9D6; --borda-2: #CFCECA; --texto: #21201C; --texto-2: #63635E; --acao: #A18072; --acao-hover: #957468; --sobre-acao: #FFFFFF; --link: #7D5E54; --ok: #46A758; --aviso: #FFC53D; --sobre-aviso: #4F3422; --erro: #E54D2E; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #63635E; --link-texto: #7D5E54; --acao-texto: #21201C; --foco: #A18072; --sobre-ok: #21201C; --sobre-aviso-seguro: #4F3422; --sobre-erro: #000000; --ok-fio: #63635E; --aviso-fio: #63635E; --erro-fio: #E54D2E; --borda-campo: #63635E; --acao-texto-min: 19px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ --acao-texto-peso: 700; /* negrito de verdade (1.4.3 texto grande) — o peso forte do pacote de tipo pode ser < 700 */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="radix"] { --fundo: light-dark(#FDFDFC, #111110); --superficie: light-dark(#F9F9F8, #191918); --componente: light-dark(#F1F0EF, #222221); --borda: light-dark(#DAD9D6, #3B3A37); --borda-2: light-dark(#CFCECA, #494844); --texto: light-dark(#21201C, #EEEEEC); --texto-2: light-dark(#63635E, #B5B3AD); --acao: light-dark(#A18072, #A18072); --acao-hover: light-dark(#957468, #AE8C7E); --sobre-acao: light-dark(#FFFFFF, #FFFFFF); --link: light-dark(#7D5E54, #D4B3A5); --ok: light-dark(#46A758, #46A758); --aviso: light-dark(#FFC53D, #FFC53D); --sobre-aviso: light-dark(#4F3422, #302008); --erro: light-dark(#E54D2E, #E54D2E); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#63635E, #B5B3AD); --link-texto: light-dark(#7D5E54, #D4B3A5); --acao-texto: light-dark(#21201C, #EEEEEC); --foco: light-dark(#A18072, #A18072); --sobre-ok: light-dark(#21201C, #111110); --sobre-aviso-seguro: light-dark(#4F3422, #302008); --sobre-erro: light-dark(#000000, #111110); --ok-fio: light-dark(#63635E, #46A758); --aviso-fio: light-dark(#63635E, #FFC53D); --erro-fio: light-dark(#E54D2E, #E54D2E); --borda-campo: light-dark(#63635E, #B5B3AD); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="radix"], :root:not([data-theme="light"]) [data-pacote-cor="radix"]:not([data-theme="light"]) { --fundo: #111110; --superficie: #191918; --componente: #222221; --borda: #3B3A37; --borda-2: #494844; --texto: #EEEEEC; --texto-2: #B5B3AD; --acao: #A18072; --acao-hover: #AE8C7E; --sobre-acao: #FFFFFF; --link: #D4B3A5; --ok: #46A758; --aviso: #FFC53D; --sobre-aviso: #302008; --erro: #E54D2E; --texto-2-pequeno: #B5B3AD; --link-texto: #D4B3A5; --acao-texto: #EEEEEC; --foco: #A18072; --sobre-ok: #111110; --sobre-aviso-seguro: #302008; --sobre-erro: #111110; --ok-fio: #46A758; --aviso-fio: #FFC53D; --erro-fio: #E54D2E; --borda-campo: #B5B3AD; } } [data-theme="dark"][data-pacote-cor="radix"], [data-theme="dark"] [data-pacote-cor="radix"], [data-pacote-cor="radix"] [data-theme="dark"] { --fundo: #111110; --superficie: #191918; --componente: #222221; --borda: #3B3A37; --borda-2: #494844; --texto: #EEEEEC; --texto-2: #B5B3AD; --acao: #A18072; --acao-hover: #AE8C7E; --sobre-acao: #FFFFFF; --link: #D4B3A5; --ok: #46A758; --aviso: #FFC53D; --sobre-aviso: #302008; --erro: #E54D2E; --texto-2-pequeno: #B5B3AD; --link-texto: #D4B3A5; --acao-texto: #EEEEEC; --foco: #A18072; --sobre-ok: #111110; --sobre-aviso-seguro: #302008; --sobre-erro: #111110; --ok-fio: #46A758; --aviso-fio: #FFC53D; --erro-fio: #E54D2E; --borda-campo: #B5B3AD; } } /* ---- 03 · Ardósia e índigo — Tailwind CSS v4.3 · Tailwind Labs · https://tailwindcss.com/docs/colors (lida 2026-09) ---- */ [data-pacote-cor="tailwind"] { --fundo: #FFFFFF; --superficie: #F8FAFC; --componente: #F1F5F9; --borda: #E2E8F0; --borda-2: #CAD5E2; --texto: #0F172B; --texto-2: #45556C; --acao: #4F39F6; --acao-hover: #432DD7; --sobre-acao: #FFFFFF; --link: #432DD7; --ok: #009966; --aviso: #FE9A00; --sobre-aviso: #461901; --erro: #E7000B; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #45556C; --link-texto: #432DD7; --acao-texto: #4F39F6; --foco: #4F39F6; --sobre-ok: #0F172B; --sobre-aviso-seguro: #461901; --sobre-erro: #FFFFFF; --ok-fio: #009966; --aviso-fio: #45556C; --erro-fio: #E7000B; --borda-campo: #45556C; --acao-texto-min: 19px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ --acao-texto-peso: 700; /* negrito de verdade (1.4.3 texto grande) — o peso forte do pacote de tipo pode ser < 700 */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="tailwind"] { --fundo: light-dark(#FFFFFF, #020618); --superficie: light-dark(#F8FAFC, #0F172B); --componente: light-dark(#F1F5F9, #1D293D); --borda: light-dark(#E2E8F0, #1D293D); --borda-2: light-dark(#CAD5E2, #314158); --texto: light-dark(#0F172B, #F8FAFC); --texto-2: light-dark(#45556C, #90A1B9); --acao: light-dark(#4F39F6, #615FFF); --acao-hover: light-dark(#432DD7, #7C86FF); --sobre-acao: light-dark(#FFFFFF, #FFFFFF); --link: light-dark(#432DD7, #A3B3FF); --ok: light-dark(#009966, #00BC7D); --aviso: light-dark(#FE9A00, #FFB900); --sobre-aviso: light-dark(#461901, #461901); --erro: light-dark(#E7000B, #FF6467); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#45556C, #90A1B9); --link-texto: light-dark(#432DD7, #A3B3FF); --acao-texto: light-dark(#4F39F6, #F8FAFC); --foco: light-dark(#4F39F6, #615FFF); --sobre-ok: light-dark(#0F172B, #020618); --sobre-aviso-seguro: light-dark(#461901, #461901); --sobre-erro: light-dark(#FFFFFF, #020618); --ok-fio: light-dark(#009966, #00BC7D); --aviso-fio: light-dark(#45556C, #FFB900); --erro-fio: light-dark(#E7000B, #FF6467); --borda-campo: light-dark(#45556C, #90A1B9); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="tailwind"], :root:not([data-theme="light"]) [data-pacote-cor="tailwind"]:not([data-theme="light"]) { --fundo: #020618; --superficie: #0F172B; --componente: #1D293D; --borda: #1D293D; --borda-2: #314158; --texto: #F8FAFC; --texto-2: #90A1B9; --acao: #615FFF; --acao-hover: #7C86FF; --sobre-acao: #FFFFFF; --link: #A3B3FF; --ok: #00BC7D; --aviso: #FFB900; --sobre-aviso: #461901; --erro: #FF6467; --texto-2-pequeno: #90A1B9; --link-texto: #A3B3FF; --acao-texto: #F8FAFC; --foco: #615FFF; --sobre-ok: #020618; --sobre-aviso-seguro: #461901; --sobre-erro: #020618; --ok-fio: #00BC7D; --aviso-fio: #FFB900; --erro-fio: #FF6467; --borda-campo: #90A1B9; } } [data-theme="dark"][data-pacote-cor="tailwind"], [data-theme="dark"] [data-pacote-cor="tailwind"], [data-pacote-cor="tailwind"] [data-theme="dark"] { --fundo: #020618; --superficie: #0F172B; --componente: #1D293D; --borda: #1D293D; --borda-2: #314158; --texto: #F8FAFC; --texto-2: #90A1B9; --acao: #615FFF; --acao-hover: #7C86FF; --sobre-acao: #FFFFFF; --link: #A3B3FF; --ok: #00BC7D; --aviso: #FFB900; --sobre-aviso: #461901; --erro: #FF6467; --texto-2-pequeno: #90A1B9; --link-texto: #A3B3FF; --acao-texto: #F8FAFC; --foco: #615FFF; --sobre-ok: #020618; --sobre-aviso-seguro: #461901; --sobre-erro: #020618; --ok-fio: #00BC7D; --aviso-fio: #FFB900; --erro-fio: #FF6467; --borda-campo: #90A1B9; } } /* ---- 04 · Tonal, por papéis — Material Design 3 baseline · Google · https://m3.material.io/styles/color/static/baseline (lida 2026-09) ---- */ [data-pacote-cor="material"] { --fundo: #FEF7FF; --superficie: #F3EDF7; --componente: #ECE6F0; --borda: #CAC4D0; --borda-2: #79747E; --texto: #1D1B20; --texto-2: #49454F; --acao: #6750A4; --acao-hover: #4F378B; --sobre-acao: #FFFFFF; --link: #6750A4; --ok: #625B71; --aviso: #7D5260; --sobre-aviso: #FFFFFF; --erro: #B3261E; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #49454F; --link-texto: #6750A4; --acao-texto: #6750A4; --foco: #6750A4; --sobre-ok: #FFFFFF; --sobre-aviso-seguro: #FFFFFF; --sobre-erro: #FFFFFF; --ok-fio: #625B71; --aviso-fio: #7D5260; --erro-fio: #B3261E; --borda-campo: #79747E; --acao-texto-min: 16px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="material"] { --fundo: light-dark(#FEF7FF, #141218); --superficie: light-dark(#F3EDF7, #211F26); --componente: light-dark(#ECE6F0, #2B2930); --borda: light-dark(#CAC4D0, #49454F); --borda-2: light-dark(#79747E, #938F99); --texto: light-dark(#1D1B20, #E6E0E9); --texto-2: light-dark(#49454F, #CAC4D0); --acao: light-dark(#6750A4, #D0BCFF); --acao-hover: light-dark(#4F378B, #EADDFF); --sobre-acao: light-dark(#FFFFFF, #381E72); --link: light-dark(#6750A4, #D0BCFF); --ok: light-dark(#625B71, #CCC2DC); --aviso: light-dark(#7D5260, #EFB8C8); --sobre-aviso: light-dark(#FFFFFF, #1D1B20); --erro: light-dark(#B3261E, #F2B8B5); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#49454F, #CAC4D0); --link-texto: light-dark(#6750A4, #D0BCFF); --acao-texto: light-dark(#6750A4, #D0BCFF); --foco: light-dark(#6750A4, #D0BCFF); --sobre-ok: light-dark(#FFFFFF, #381E72); --sobre-aviso-seguro: light-dark(#FFFFFF, #1D1B20); --sobre-erro: light-dark(#FFFFFF, #381E72); --ok-fio: light-dark(#625B71, #CCC2DC); --aviso-fio: light-dark(#7D5260, #EFB8C8); --erro-fio: light-dark(#B3261E, #F2B8B5); --borda-campo: light-dark(#79747E, #938F99); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="material"], :root:not([data-theme="light"]) [data-pacote-cor="material"]:not([data-theme="light"]) { --fundo: #141218; --superficie: #211F26; --componente: #2B2930; --borda: #49454F; --borda-2: #938F99; --texto: #E6E0E9; --texto-2: #CAC4D0; --acao: #D0BCFF; --acao-hover: #EADDFF; --sobre-acao: #381E72; --link: #D0BCFF; --ok: #CCC2DC; --aviso: #EFB8C8; --sobre-aviso: #1D1B20; --erro: #F2B8B5; --texto-2-pequeno: #CAC4D0; --link-texto: #D0BCFF; --acao-texto: #D0BCFF; --foco: #D0BCFF; --sobre-ok: #381E72; --sobre-aviso-seguro: #1D1B20; --sobre-erro: #381E72; --ok-fio: #CCC2DC; --aviso-fio: #EFB8C8; --erro-fio: #F2B8B5; --borda-campo: #938F99; } } [data-theme="dark"][data-pacote-cor="material"], [data-theme="dark"] [data-pacote-cor="material"], [data-pacote-cor="material"] [data-theme="dark"] { --fundo: #141218; --superficie: #211F26; --componente: #2B2930; --borda: #49454F; --borda-2: #938F99; --texto: #E6E0E9; --texto-2: #CAC4D0; --acao: #D0BCFF; --acao-hover: #EADDFF; --sobre-acao: #381E72; --link: #D0BCFF; --ok: #CCC2DC; --aviso: #EFB8C8; --sobre-aviso: #1D1B20; --erro: #F2B8B5; --texto-2-pequeno: #CAC4D0; --link-texto: #D0BCFF; --acao-texto: #D0BCFF; --foco: #D0BCFF; --sobre-ok: #381E72; --sobre-aviso-seguro: #1D1B20; --sobre-erro: #381E72; --ok-fio: #CCC2DC; --aviso-fio: #EFB8C8; --erro-fio: #F2B8B5; --borda-campo: #938F99; } } /* ---- 05 · Nativo, de consumo — Human Interface Guidelines · Apple · https://developer.apple.com/design/human-interface-guidelines/color (lida 2026-09) ---- */ [data-pacote-cor="apple"] { --fundo: #FFFFFF; --superficie: #F2F2F7; --componente: #E5E5EA; --borda: #D1D1D6; --borda-2: #C7C7CC; --texto: #000000; --texto-2: #8E8E93; --acao: #0088FF; --acao-hover: #1E6EF4; --sobre-acao: #FFFFFF; --link: #0088FF; --ok: #34C759; --aviso: #FF8D28; --sobre-aviso: #000000; --erro: #FF383C; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #000000; --link-texto: #000000; --acao-texto: #000000; --foco: #0088FF; --sobre-ok: #000000; --sobre-aviso-seguro: #000000; --sobre-erro: #000000; --ok-fio: #000000; --aviso-fio: #000000; --erro-fio: #FF383C; --borda-campo: #000000; --acao-texto-min: 19px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ --acao-texto-peso: 700; /* negrito de verdade (1.4.3 texto grande) — o peso forte do pacote de tipo pode ser < 700 */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="apple"] { --fundo: light-dark(#FFFFFF, #000000); --superficie: light-dark(#F2F2F7, #1C1C1E); --componente: light-dark(#E5E5EA, #2C2C2E); --borda: light-dark(#D1D1D6, #3A3A3C); --borda-2: light-dark(#C7C7CC, #48484A); --texto: light-dark(#000000, #FFFFFF); --texto-2: light-dark(#8E8E93, #8E8E93); --acao: light-dark(#0088FF, #0091FF); --acao-hover: light-dark(#1E6EF4, #5CB8FF); --sobre-acao: light-dark(#FFFFFF, #FFFFFF); --link: light-dark(#0088FF, #0091FF); --ok: light-dark(#34C759, #30D158); --aviso: light-dark(#FF8D28, #FF9230); --sobre-aviso: light-dark(#000000, #000000); --erro: light-dark(#FF383C, #FF4245); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#000000, #FFFFFF); --link-texto: light-dark(#000000, #0091FF); --acao-texto: light-dark(#000000, #FFFFFF); --foco: light-dark(#0088FF, #0091FF); --sobre-ok: light-dark(#000000, #000000); --sobre-aviso-seguro: light-dark(#000000, #000000); --sobre-erro: light-dark(#000000, #000000); --ok-fio: light-dark(#000000, #30D158); --aviso-fio: light-dark(#000000, #FF9230); --erro-fio: light-dark(#FF383C, #FF4245); --borda-campo: light-dark(#000000, #8E8E93); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="apple"], :root:not([data-theme="light"]) [data-pacote-cor="apple"]:not([data-theme="light"]) { --fundo: #000000; --superficie: #1C1C1E; --componente: #2C2C2E; --borda: #3A3A3C; --borda-2: #48484A; --texto: #FFFFFF; --texto-2: #8E8E93; --acao: #0091FF; --acao-hover: #5CB8FF; --sobre-acao: #FFFFFF; --link: #0091FF; --ok: #30D158; --aviso: #FF9230; --sobre-aviso: #000000; --erro: #FF4245; --texto-2-pequeno: #FFFFFF; --link-texto: #0091FF; --acao-texto: #FFFFFF; --foco: #0091FF; --sobre-ok: #000000; --sobre-aviso-seguro: #000000; --sobre-erro: #000000; --ok-fio: #30D158; --aviso-fio: #FF9230; --erro-fio: #FF4245; --borda-campo: #8E8E93; } } [data-theme="dark"][data-pacote-cor="apple"], [data-theme="dark"] [data-pacote-cor="apple"], [data-pacote-cor="apple"] [data-theme="dark"] { --fundo: #000000; --superficie: #1C1C1E; --componente: #2C2C2E; --borda: #3A3A3C; --borda-2: #48484A; --texto: #FFFFFF; --texto-2: #8E8E93; --acao: #0091FF; --acao-hover: #5CB8FF; --sobre-acao: #FFFFFF; --link: #0091FF; --ok: #30D158; --aviso: #FF9230; --sobre-aviso: #000000; --erro: #FF4245; --texto-2-pequeno: #FFFFFF; --link-texto: #0091FF; --acao-texto: #FFFFFF; --foco: #0091FF; --sobre-ok: #000000; --sobre-aviso-seguro: #000000; --sobre-erro: #000000; --ok-fio: #30D158; --aviso-fio: #FF9230; --erro-fio: #FF4245; --borda-campo: #8E8E93; } } /* ---- 06 · Papel quente e lacre — Kit de Referência de Design 2026/2027 · a obra irmã desta casa · referencia-de-design-2026-2027/sistema/02-cor.md (lida 2026-09-21) ---- */ [data-pacote-cor="referencia"] { --fundo: #F5F3ED; --superficie: #FBFAF6; --componente: #EFEDE5; --borda: #D9D6CD; --borda-2: #7B776E; --texto: #221F19; --texto-2: #514C44; --acao: #A93620; --acao-hover: #8D1D0A; --sobre-acao: #FBFAF6; --link: #A93620; --ok: #185B37; --aviso: #79570B; --sobre-aviso: #FBFAF6; --erro: #97271B; /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: #514C44; --link-texto: #A93620; --acao-texto: #A93620; --foco: #A93620; --sobre-ok: #FBFAF6; --sobre-aviso-seguro: #FBFAF6; --sobre-erro: #FBFAF6; --ok-fio: #185B37; --aviso-fio: #79570B; --erro-fio: #97271B; --borda-campo: #7B776E; --acao-texto-min: 16px; /* texto do botão cheio: 16px se sobre-acao ≥ 4.5:1 sobre a ação nos dois temas, senão 19px negrito */ } @supports (color: light-dark(#000, #fff)) { [data-pacote-cor="referencia"] { --fundo: light-dark(#F5F3ED, #161310); --superficie: light-dark(#FBFAF6, #1F1C18); --componente: light-dark(#EFEDE5, #2C2822); --borda: light-dark(#D9D6CD, #2C2822); --borda-2: light-dark(#7B776E, #767168); --texto: light-dark(#221F19, #E7E4DD); --texto-2: light-dark(#514C44, #9C988E); --acao: light-dark(#A93620, #DF7055); --acao-hover: light-dark(#8D1D0A, #EE8266); --sobre-acao: light-dark(#FBFAF6, #161310); --link: light-dark(#A93620, #DF7055); --ok: light-dark(#185B37, #68B986); --aviso: light-dark(#79570B, #D1A84B); --sobre-aviso: light-dark(#FBFAF6, #161310); --erro: light-dark(#97271B, #ED7665); /* DERIVADOS por contraste (regra no tokens.json > contrato; razões na matriz do kit.html) */ --texto-2-pequeno: light-dark(#514C44, #9C988E); --link-texto: light-dark(#A93620, #DF7055); --acao-texto: light-dark(#A93620, #DF7055); --foco: light-dark(#A93620, #DF7055); --sobre-ok: light-dark(#FBFAF6, #161310); --sobre-aviso-seguro: light-dark(#FBFAF6, #161310); --sobre-erro: light-dark(#FBFAF6, #161310); --ok-fio: light-dark(#185B37, #68B986); --aviso-fio: light-dark(#79570B, #D1A84B); --erro-fio: light-dark(#97271B, #ED7665); --borda-campo: light-dark(#7B776E, #767168); } } @supports not (color: light-dark(#000, #fff)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-pacote-cor="referencia"], :root:not([data-theme="light"]) [data-pacote-cor="referencia"]:not([data-theme="light"]) { --fundo: #161310; --superficie: #1F1C18; --componente: #2C2822; --borda: #2C2822; --borda-2: #767168; --texto: #E7E4DD; --texto-2: #9C988E; --acao: #DF7055; --acao-hover: #EE8266; --sobre-acao: #161310; --link: #DF7055; --ok: #68B986; --aviso: #D1A84B; --sobre-aviso: #161310; --erro: #ED7665; --texto-2-pequeno: #9C988E; --link-texto: #DF7055; --acao-texto: #DF7055; --foco: #DF7055; --sobre-ok: #161310; --sobre-aviso-seguro: #161310; --sobre-erro: #161310; --ok-fio: #68B986; --aviso-fio: #D1A84B; --erro-fio: #ED7665; --borda-campo: #767168; } } [data-theme="dark"][data-pacote-cor="referencia"], [data-theme="dark"] [data-pacote-cor="referencia"], [data-pacote-cor="referencia"] [data-theme="dark"] { --fundo: #161310; --superficie: #1F1C18; --componente: #2C2822; --borda: #2C2822; --borda-2: #767168; --texto: #E7E4DD; --texto-2: #9C988E; --acao: #DF7055; --acao-hover: #EE8266; --sobre-acao: #161310; --link: #DF7055; --ok: #68B986; --aviso: #D1A84B; --sobre-aviso: #161310; --erro: #ED7665; --texto-2-pequeno: #9C988E; --link-texto: #DF7055; --acao-texto: #DF7055; --foco: #DF7055; --sobre-ok: #161310; --sobre-aviso-seguro: #161310; --sobre-erro: #161310; --ok-fio: #68B986; --aviso-fio: #D1A84B; --erro-fio: #ED7665; --borda-campo: #767168; } } /* =================== TIPOGRAFIA · 6 pacotes ==================== */ /* ---- 01 · Suíço de produto — Geist · Vercel · https://vercel.com/font (lida 2026-09) · carga do Google Fonts: css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap ---- */ @font-face { font-family: "Geist reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 101.11%; } /* Geist 0.4682 ÷ Arial 0.4630 px/px */ @font-face { font-family: "Geist Mono reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* Geist Mono 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="geist"] { --voz: Geist, "Geist reserva", system-ui, sans-serif; --instrumento: Geist, "Geist reserva", system-ui, sans-serif; --dado: "Geist Mono", "Geist Mono reserva", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --peso-display: 600; --peso-titulo: 600; --track-display: -0.025em; --track-titulo: -0.02em; /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.46817; --ppc-voz: 0.46817; --ppc-voz-italico: 0.46817; --ppc-dado: 0.6; } /* ---- 02 · O padrão de interface — Inter · Rasmus Andersson · https://rsms.me/inter/ (lida 2026-09) · carga do Google Fonts: css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@100..800&display=swap ---- */ @font-face { font-family: "Inter reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 104.96%; } /* Inter 0.4860 ÷ Arial 0.4630 px/px */ @font-face { font-family: "JetBrains Mono reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* JetBrains Mono 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="inter"] { --voz: Inter, "Inter reserva", system-ui, sans-serif; --instrumento: Inter, "Inter reserva", system-ui, sans-serif; --dado: "JetBrains Mono", "JetBrains Mono reserva", ui-monospace, monospace; --peso-display: 600; --peso-titulo: 600; --track-display: -0.03em; --track-titulo: -0.02em; --pilha-opsz: 32; /* o eixo óptico da pilha trava no teto da família (R-64) */ /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.48598; --ppc-voz: 0.44774; --ppc-voz-italico: 0.47068; --ppc-dado: 0.6; } /* ---- 03 · Superfamília de sistema — IBM Plex · Carbon Design System · https://carbondesignsystem.com/elements/typography/overview/ (lida 2026-09) · carga do Google Fonts: css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap ---- */ @font-face { font-family: "IBM Plex Sans reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 99.18%; } /* IBM Plex Sans 0.4592 ÷ Arial 0.4630 px/px */ @font-face { font-family: "IBM Plex Serif reserva"; src: local("Georgia"), local("Times New Roman"); size-adjust: 106.59%; } /* IBM Plex Serif 0.4761 ÷ Georgia 0.4467 px/px */ @font-face { font-family: "IBM Plex Mono reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* IBM Plex Mono 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="plex"] { --voz: "IBM Plex Serif", "IBM Plex Serif reserva", Georgia, serif; --instrumento: "IBM Plex Sans", "IBM Plex Sans reserva", "Helvetica Neue", Arial, sans-serif; --dado: "IBM Plex Mono", "IBM Plex Mono reserva", Menlo, monospace; --peso-display: 400; --peso-titulo: 600; --track-display: -0.01em; --track-titulo: 0; /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.4592; --ppc-voz: 0.47613; --ppc-voz-italico: 0.42627; --ppc-dado: 0.6; } /* ---- 04 · A marca do Google, aberta — Google Sans · Google · https://fonts.google.com/specimen/Google+Sans (lida 2026-09) · carga do Google Fonts: css2?family=Google+Sans+Flex:opsz,wdth,wght@6..144,25..151,1..1000&family=Google+Sans:opsz,wght@17..18,400..700&family=Google+Sans+Code:wght@300..800&display=swap ---- */ @font-face { font-family: "Google Sans reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 101.01%; } /* Google Sans 0.4677 ÷ Arial 0.4630 px/px */ @font-face { font-family: "Google Sans Flex reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 98.99%; } /* Google Sans Flex 0.4583 ÷ Arial 0.4630 px/px */ @font-face { font-family: "Google Sans Code reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* Google Sans Code 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="google"] { --voz: "Google Sans Flex", "Google Sans Flex reserva", "Google Sans", system-ui, sans-serif; --instrumento: "Google Sans", "Google Sans reserva", system-ui, Roboto, sans-serif; --dado: "Google Sans Code", "Google Sans Code reserva", ui-monospace, monospace; --peso-display: 600; --peso-titulo: 600; --track-display: -0.02em; --track-titulo: -0.01em; --pilha-opsz: 144; /* o eixo óptico da pilha trava no teto da família (R-64) */ /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.46767; --ppc-voz: 0.45834; --ppc-voz-italico: 0.46103; --ppc-dado: 0.6; } /* ---- 05 · Editorial, de leitura longa — Source · Adobe (Source Serif 4 de Frank Grießhammer, Source Sans 3 de Paul Hunt) · https://fonts.google.com/specimen/Source+Serif+4/about (lida 2026-09) · carga do Google Fonts: css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Source+Sans+3:wght@200..900&family=Source+Code+Pro:wght@200..900&display=swap ---- */ @font-face { font-family: "Source Sans 3 reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 91.31%; } /* Source Sans 3 0.4228 ÷ Arial 0.4630 px/px */ @font-face { font-family: "Source Serif 4 reserva"; src: local("Georgia"), local("Times New Roman"); size-adjust: 98.31%; } /* Source Serif 4 0.4391 ÷ Georgia 0.4467 px/px */ @font-face { font-family: "Source Code Pro reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* Source Code Pro 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="source"] { --voz: "Source Serif 4", "Source Serif 4 reserva", Georgia, serif; --instrumento: "Source Sans 3", "Source Sans 3 reserva", system-ui, sans-serif; --dado: "Source Code Pro", "Source Code Pro reserva", ui-monospace, monospace; --peso-display: 600; --peso-titulo: 600; --track-display: -0.012em; --track-titulo: 0; --pilha-opsz: 60; /* o eixo óptico da pilha trava no teto da família (R-64) */ /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.42279; --ppc-voz: 0.43915; --ppc-voz-italico: 0.41332; --ppc-dado: 0.6; } /* ---- 06 · Editorial de referência — Fraunces · Instrument Sans · Spline Sans Mono — Kit de Referência de Design 2026/2027 (a obra irmã desta casa) · referencia-de-design-2026-2027/sistema/01-tipografia.md (lida 2026-09-21) · carga do Google Fonts: css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Spline+Sans+Mono:wght@300..700&display=swap ---- */ @font-face { font-family: "Instrument Sans reserva"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 100.05%; } /* Instrument Sans 0.4633 ÷ Arial 0.4630 px/px */ @font-face { font-family: "Fraunces reserva"; src: local("Georgia"), local("Times New Roman"); size-adjust: 103.22%; } /* Fraunces 0.4611 ÷ Georgia 0.4467 px/px */ @font-face { font-family: "Spline Sans Mono reserva"; src: local("Consolas"), local("Menlo"), local("Courier New"); size-adjust: 109.13%; } /* Spline Sans Mono 0.6000 ÷ Consolas 0.5498 px/px */ [data-pacote-tipo="fraunces"] { --voz: Fraunces, "Fraunces reserva", Georgia, serif; --instrumento: "Instrument Sans", "Instrument Sans reserva", system-ui, sans-serif; --dado: "Spline Sans Mono", "Spline Sans Mono reserva", ui-monospace, monospace; --peso-display: 500; --peso-titulo: 600; --track-display: -0.015em; --track-titulo: -0.005em; --pilha-opsz: 144; /* o eixo óptico da pilha trava no teto da família (R-64) */ /* largura de caractere MEDIDA no tamanho de uso de cada face (px por px de tamanho; ferramentas/medidas-tipografia.json, 2026-09-22) */ --ppc-instrumento: 0.46326; --ppc-voz: 0.46107; --ppc-voz-italico: 0.43946; --ppc-dado: 0.6; } /* ===================== ESCALAS · 3 oficiais ===================== */ /* ---- escala Carbon (IBM) · https://carbondesignsystem.com/elements/typography/type-sets/ (lida 2026-09) · entrelinha: regra do kit ---- */ [data-escala="carbon"] { --papel-display-xl-tamanho: 68px; --papel-display-xl-tamanho-n: 68; --papel-display-xl-entrelinha: 76px; --papel-display-l-tamanho: 54px; --papel-display-l-tamanho-n: 54; --papel-display-l-entrelinha: 60px; --papel-h1-tamanho: 42px; --papel-h1-tamanho-n: 42; --papel-h1-entrelinha: 52px; --papel-h2-tamanho: 32px; --papel-h2-tamanho-n: 32; --papel-h2-entrelinha: 40px; --papel-h3-tamanho: 24px; --papel-h3-tamanho-n: 24; --papel-h3-entrelinha: 28px; --papel-lede-tamanho: 20px; --papel-lede-tamanho-n: 20; --papel-lede-entrelinha: 28px; --papel-corpo-longo-tamanho: 18px; --papel-corpo-longo-tamanho-n: 18; --papel-corpo-longo-entrelinha: 28px; --papel-corpo-tamanho: 16px; --papel-corpo-tamanho-n: 16; --papel-corpo-entrelinha: 24px; --papel-meta-tamanho: 14px; --papel-meta-tamanho-n: 14; --papel-meta-entrelinha: 20px; --papel-rotulo-tamanho: 12px; --papel-rotulo-tamanho-n: 12; --papel-rotulo-entrelinha: 16px; --papel-navegacao-tamanho: 14px; --papel-navegacao-tamanho-n: 14; --papel-navegacao-entrelinha: 20px; --papel-dado-tamanho: 14px; --papel-dado-tamanho-n: 14; --papel-dado-entrelinha: 20px; } @media (max-width: 767px) { [data-escala="carbon"] { --papel-display-xl-tamanho: 42px; --papel-display-xl-tamanho-n: 42; --papel-display-xl-entrelinha: 48px; --papel-display-l-tamanho: 36px; --papel-display-l-tamanho-n: 36; --papel-display-l-entrelinha: 40px; --papel-h1-tamanho: 32px; --papel-h1-tamanho-n: 32; --papel-h1-entrelinha: 40px; --papel-h2-tamanho: 28px; --papel-h2-tamanho-n: 28; --papel-h2-entrelinha: 32px; --papel-h3-tamanho: 20px; --papel-h3-tamanho-n: 20; --papel-h3-entrelinha: 24px; --papel-lede-tamanho: 18px; --papel-lede-tamanho-n: 18; --papel-lede-entrelinha: 24px; } } /* ---- escala Material 3 (Google) · https://m3.material.io/styles/typography/type-scale-tokens (lida 2026-09) · entrelinha: oficial ---- */ [data-escala="material"] { --papel-display-xl-tamanho: 57px; --papel-display-xl-tamanho-n: 57; --papel-display-xl-entrelinha: 64px; --papel-display-l-tamanho: 45px; --papel-display-l-tamanho-n: 45; --papel-display-l-entrelinha: 52px; --papel-h1-tamanho: 32px; --papel-h1-tamanho-n: 32; --papel-h1-entrelinha: 40px; --papel-h2-tamanho: 28px; --papel-h2-tamanho-n: 28; --papel-h2-entrelinha: 36px; --papel-h3-tamanho: 24px; --papel-h3-tamanho-n: 24; --papel-h3-entrelinha: 32px; --papel-lede-tamanho: 22px; --papel-lede-tamanho-n: 22; --papel-lede-entrelinha: 28px; --papel-corpo-longo-tamanho: 16px; --papel-corpo-longo-tamanho-n: 16; --papel-corpo-longo-entrelinha: 24px; --papel-corpo-tamanho: 16px; --papel-corpo-tamanho-n: 16; --papel-corpo-entrelinha: 24px; --papel-meta-tamanho: 14px; --papel-meta-tamanho-n: 14; --papel-meta-entrelinha: 20px; --papel-rotulo-tamanho: 12px; --papel-rotulo-tamanho-n: 12; --papel-rotulo-entrelinha: 16px; --papel-navegacao-tamanho: 14px; --papel-navegacao-tamanho-n: 14; --papel-navegacao-entrelinha: 20px; --papel-dado-tamanho: 14px; --papel-dado-tamanho-n: 14; --papel-dado-entrelinha: 20px; } @media (max-width: 767px) { [data-escala="material"] { --papel-display-xl-tamanho: 36px; --papel-display-xl-tamanho-n: 36; --papel-display-xl-entrelinha: 44px; --papel-display-l-tamanho: 32px; --papel-display-l-tamanho-n: 32; --papel-display-l-entrelinha: 40px; --papel-h1-tamanho: 28px; --papel-h1-tamanho-n: 28; --papel-h1-entrelinha: 36px; --papel-h2-tamanho: 24px; --papel-h2-tamanho-n: 24; --papel-h2-entrelinha: 32px; --papel-h3-tamanho: 22px; --papel-h3-tamanho-n: 22; --papel-h3-entrelinha: 28px; } } /* ---- escala Apple HIG (iOS, padrão) · https://developer.apple.com/design/human-interface-guidelines/typography (lida 2026-09) · entrelinha: oficial ---- */ [data-escala="apple"] { --papel-display-xl-tamanho: 34px; --papel-display-xl-tamanho-n: 34; --papel-display-xl-entrelinha: 41px; --papel-display-l-tamanho: 28px; --papel-display-l-tamanho-n: 28; --papel-display-l-entrelinha: 34px; --papel-h1-tamanho: 28px; --papel-h1-tamanho-n: 28; --papel-h1-entrelinha: 34px; --papel-h2-tamanho: 22px; --papel-h2-tamanho-n: 22; --papel-h2-entrelinha: 28px; --papel-h3-tamanho: 20px; --papel-h3-tamanho-n: 20; --papel-h3-entrelinha: 25px; --papel-lede-tamanho: 17px; --papel-lede-tamanho-n: 17; --papel-lede-entrelinha: 22px; --papel-corpo-longo-tamanho: 17px; --papel-corpo-longo-tamanho-n: 17; --papel-corpo-longo-entrelinha: 22px; --papel-corpo-tamanho: 17px; --papel-corpo-tamanho-n: 17; --papel-corpo-entrelinha: 22px; --papel-meta-tamanho: 13px; --papel-meta-tamanho-n: 13; --papel-meta-entrelinha: 18px; --papel-rotulo-tamanho: 12px; --papel-rotulo-tamanho-n: 12; --papel-rotulo-entrelinha: 16px; --papel-navegacao-tamanho: 15px; --papel-navegacao-tamanho-n: 15; --papel-navegacao-entrelinha: 20px; --papel-dado-tamanho: 16px; --papel-dado-tamanho-n: 16; --papel-dado-entrelinha: 21px; } @media (max-width: 767px) { [data-escala="apple"] { /* nenhum papel muda em tela estreita nesta escala */ } } /* ---- escala Editorial (a escala do exagero) · https://www.itsnicethat.com/features/gail-bichler-the-new-york-times-magazine-redesign-publication-spotlight-080426 (lida 2026-09) · entrelinha: regra do kit ---- */ [data-escala="editorial"] { --papel-display-xl-tamanho: 140px; --papel-display-xl-tamanho-n: 140; --papel-display-xl-entrelinha: 156px; --papel-display-l-tamanho: 112px; --papel-display-l-tamanho-n: 112; --papel-display-l-entrelinha: 124px; --papel-h1-tamanho: 80px; --papel-h1-tamanho-n: 80; --papel-h1-entrelinha: 96px; --papel-h2-tamanho: 56px; --papel-h2-tamanho-n: 56; --papel-h2-entrelinha: 68px; --papel-h3-tamanho: 40px; --papel-h3-tamanho-n: 40; --papel-h3-entrelinha: 48px; --papel-lede-tamanho: 24px; --papel-lede-tamanho-n: 24; --papel-lede-entrelinha: 32px; --papel-corpo-longo-tamanho: 18px; --papel-corpo-longo-tamanho-n: 18; --papel-corpo-longo-entrelinha: 28px; --papel-corpo-tamanho: 16px; --papel-corpo-tamanho-n: 16; --papel-corpo-entrelinha: 24px; --papel-meta-tamanho: 14px; --papel-meta-tamanho-n: 14; --papel-meta-entrelinha: 20px; --papel-rotulo-tamanho: 12px; --papel-rotulo-tamanho-n: 12; --papel-rotulo-entrelinha: 16px; --papel-navegacao-tamanho: 14px; --papel-navegacao-tamanho-n: 14; --papel-navegacao-entrelinha: 20px; --papel-dado-tamanho: 14px; --papel-dado-tamanho-n: 14; --papel-dado-entrelinha: 20px; } @media (max-width: 767px) { [data-escala="editorial"] { --papel-display-xl-tamanho: 64px; --papel-display-xl-tamanho-n: 64; --papel-display-xl-entrelinha: 72px; --papel-display-l-tamanho: 56px; --papel-display-l-tamanho-n: 56; --papel-display-l-entrelinha: 60px; --papel-h1-tamanho: 48px; --papel-h1-tamanho-n: 48; --papel-h1-entrelinha: 56px; --papel-h2-tamanho: 40px; --papel-h2-tamanho-n: 40; --papel-h2-entrelinha: 48px; --papel-h3-tamanho: 32px; --papel-h3-tamanho-n: 32; --papel-h3-entrelinha: 40px; --papel-lede-tamanho: 20px; --papel-lede-tamanho-n: 20; --papel-lede-entrelinha: 28px; } }