/* ========================================================================== Inter — Fundamentos Camada única de tokens. Toda a linguagem visual nasce daqui. A paleta, a tipografia e a geometria abaixo foram conferidas contra dois materiais oficiais: o guideline de marca (estratégia, arquétipo e voz) e o template de apresentação 2026, que é a fonte dos valores de cor. Os nomes são os da marca: Laranja Inter, Marrom Inter, Terracota, Pêssego, Creme, Cinza e Texto. Poucas cores, usadas com intenção. O laranja é a voz; o marrom e o creme são o palco; o branco dá respiro. ========================================================================== */ :root { color-scheme: light; /* --------------------------------------------------------------------- 1. PALETA BRUTA (valores primitivos — não usar direto em componentes) --------------------------------------------------------------------- */ /* Laranja — a voz da marca. 500 é o Laranja Inter e 800 o Marrom Inter, nos valores que o guia de marca carimba: #FC6800 e #7B3300. Essa é a referência quando há conflito. O template 2026 de apresentação imprime os mesmos dois papéis um passo mais fechado, em #EA7100 e #72370E; eles ficam guardados logo abaixo, com nome próprio, e só as miniaturas de slide os usam. 200, 400 e 700 são cores medidas no template. Os demais degraus fecham a rampa mantendo o mesmo matiz. */ --inter-laranja-50: #FEF3E8; --inter-laranja-100: #FDE1C6; --inter-laranja-150: #FFD9B2; --inter-laranja-200: #FFCA96; --inter-laranja-300: #FFA85E; --inter-laranja-400: #FF8C1A; --inter-laranja-500: #FC6800; --inter-laranja-600: #B95500; --inter-laranja-700: #943D15; --inter-laranja-800: #7B3300; --inter-laranja-900: #59250D; /* Os dois tons do template 2026 de apresentação. Um PowerPoint não tem modo escuro nem anel de foco: eles existem só para as miniaturas de slide do catálogo reproduzirem o arquivo original. Não use em produto. */ --inter-laranja-deck: #EA7100; --inter-marrom-deck: #72370E; /* Atalhos com o nome de marca, para quem procura pela cor e não pelo passo */ --inter-laranja: var(--inter-laranja-500); --inter-terracota: var(--inter-laranja-700); --inter-marrom: var(--inter-laranja-800); --inter-pessego: var(--inter-laranja-200); --inter-pessego-claro: var(--inter-laranja-150); /* Areia — neutros quentes. Nada de cinza frio, nada de preto puro. 50 é o Creme do template (#FDF8EE), 200 o creme fechado dos blocos, 250 o cinza de placeholder de imagem, 500 o Cinza e 800 o Texto (#3C3331). 900 é o quase-preto dos slides. */ --inter-areia-0: #FFFFFF; --inter-areia-50: #FDF8EE; --inter-areia-100: #FFF1E4; --inter-areia-200: #F2EDE3; --inter-areia-250: #EBEBEB; --inter-areia-300: #E5DACD; --inter-areia-400: #C0B2AA; --inter-areia-500: #81756F; --inter-areia-600: #6E625C; --inter-areia-700: #5E534E; --inter-areia-800: #3C3331; --inter-areia-900: #282728; --inter-areia-950: #17120F; --inter-creme: var(--inter-areia-50); --inter-creme-forte: var(--inter-areia-200); --inter-cinza: var(--inter-areia-500); --inter-cinza-claro: var(--inter-areia-250); /* Feedback — puxados para o lado quente, para conviverem com o creme */ --inter-verde-100: #E2F2E6; --inter-verde-500: #1F7A45; --inter-verde-700: #145730; --inter-ambar-100: #FBEDD3; --inter-ambar-500: #A97000; --inter-ambar-700: #7E5300; --inter-vermelho-100: #FBE5E1; --inter-vermelho-500: #C1332A; --inter-vermelho-700: #91231C; --inter-azul-100: #E4EEF7; --inter-azul-500: #245F9E; --inter-azul-700: #1A4577; /* Paleta secundária da marca — as cinco cores de apoio do template 2026. São pastéis de saturação alta que aparecem em pílulas, gráficos e marcações. Servem para preencher; para escrever em cima existe a versão -texto, escurecida até passar em AA. */ --inter-acento-azul: #66CCFB; --inter-acento-menta: #80E7BD; --inter-acento-rosa: #F8B6E6; --inter-acento-amarelo: #FBFF71; --inter-acento-lilas: #C3B6FC; /* --------------------------------------------------------------------- 2. COR SEMÂNTICA — tema Dia (padrão) Os componentes só enxergam esta camada. --------------------------------------------------------------------- */ /* Fundo — creme claro como tela, branco como superfície que respira */ --inter-fundo: var(--inter-areia-50); --inter-fundo-alternado: var(--inter-areia-100); /* Superfícies */ --inter-superficie: var(--inter-areia-0); --inter-superficie-sutil: var(--inter-areia-100); --inter-superficie-forte: var(--inter-areia-200); --inter-superficie-neutra: var(--inter-areia-250); --inter-superficie-inversa: var(--inter-areia-900); --inter-superficie-marca: var(--inter-laranja-50); /* Texto. O Cinza da marca (areia-500) dá 4,4 sobre branco: serve para nota grande e decoração, não para legenda de 12px. Os papéis de leitura ficam um e dois passos abaixo, onde o AA fecha. */ --inter-texto: var(--inter-areia-800); --inter-texto-suave: var(--inter-areia-700); --inter-texto-sutil: var(--inter-areia-600); --inter-texto-invertido: var(--inter-areia-0); --inter-texto-marca: var(--inter-laranja-700); --inter-texto-desabilitado: var(--inter-areia-400); /* Bordas — fio fino. O guideline pede para evitar borda grossa. */ --inter-borda: var(--inter-areia-300); --inter-borda-sutil: var(--inter-areia-200); --inter-borda-forte: var(--inter-areia-400); --inter-borda-marca: var(--inter-laranja-500); /* Ação. O Laranja Inter é a voz da marca e vive em traço, foco, ícone grande e chip — lugares onde ele aparece sobre creme ou branco com texto escuro. Preenchimento com rótulo branco pede um passo mais fundo: o laranja-500 com branco fica em 2,95. O laranja-600 fecha 4,81. */ --inter-acao: var(--inter-laranja-600); --inter-acao-hover: var(--inter-laranja-700); --inter-acao-ativo: var(--inter-laranja-800); --inter-acao-sutil: var(--inter-laranja-50); --inter-acao-sutil-hover: var(--inter-laranja-100); --inter-acao-texto: var(--inter-areia-0); --inter-acao-borda: var(--inter-laranja-200); /* O laranja puro, para quando não há texto pequeno em cima */ --inter-acao-marca: var(--inter-laranja-500); /* Destrutivo */ --inter-perigo: var(--inter-vermelho-500); --inter-perigo-hover: var(--inter-vermelho-700); --inter-perigo-sutil: var(--inter-vermelho-100); --inter-perigo-texto: var(--inter-areia-0); /* Feedback semântico */ --inter-sucesso: var(--inter-verde-500); --inter-sucesso-sutil: var(--inter-verde-100); --inter-sucesso-texto: var(--inter-verde-700); --inter-atencao: var(--inter-ambar-500); --inter-atencao-sutil: var(--inter-ambar-100); --inter-atencao-texto: var(--inter-ambar-700); --inter-erro: var(--inter-vermelho-500); --inter-erro-sutil: var(--inter-vermelho-100); --inter-erro-texto: var(--inter-vermelho-700); --inter-info: var(--inter-azul-500); --inter-info-sutil: var(--inter-azul-100); --inter-info-texto: var(--inter-azul-700); /* Acentos em três faces, como o feedback: a cor cheia para preencher, a diluída para fundo e a escurecida para escrever. Os valores -texto são os mesmos matizes levados até passar de 4,6 sobre a própria diluída, sobre o branco e sobre o creme. */ --inter-acento-azul-sutil: #DDF4FE; --inter-acento-menta-sutil: #E3FAF0; --inter-acento-rosa-sutil: #FDEFFA; --inter-acento-amarelo-sutil: #FEFFE0; --inter-acento-lilas-sutil: #F2EFFE; --inter-acento-azul-texto: #0472A5; --inter-acento-menta-texto: #187D54; --inter-acento-rosa-texto: #CB1399; --inter-acento-amarelo-texto: #727500; --inter-acento-lilas-texto: #6C4CF8; /* Foco e seleção — o anel é laranja de marca, sempre. O anel é elemento gráfico e precisa de 3:1 contra a superfície que encosta nele. O laranja-500 puro dá 2,79 sobre creme, então quem desenha o anel é o laranja-600, que fecha 4,55 sobre creme e 4,81 sobre branco. --inter-foco-anel é o halo macio que fica por fora do anel. Sozinho ele não serve de indicador: em 34% de alfa sobre creme dá 1,59. Por isso --inter-sombra-foco desenha os dois, o anel sólido e o halo. */ --inter-foco-anel: rgba(185, 85, 0, 0.30); --inter-foco-cor: var(--inter-laranja-600); --inter-selecionado: var(--inter-laranja-50); --inter-sobreposicao: rgba(40, 39, 40, 0.44); /* --------------------------------------------------------------------- 3. TIPOGRAFIA Duas famílias, dois papéis. A Citrina, em peso light, fala alto: títulos, statements e display de card. A Inter faz o trabalho de leitura: intro, corpo e notas. O peso light vale para tela, e é o que o guia de marca mostra em toda peça de display. Slide é outro meio: o template 2026 projeta a Citrina em Regular, Medium e Bold, porque a leitura é a metros de distância. Quem monta apresentação segue a escala da seção 05 do catálogo. Sem a Citrina instalada, a substituta oficial do guideline é a Outfit Light, no mesmo tamanho. Não há monoespaçada de marca. Onde o conteúdo é código e o alinhamento por caractere importa, usamos a monoespaçada do sistema: ela já está instalada, não custa download e combina com o resto sem chamar atenção. --------------------------------------------------------------------- */ --inter-fonte-titulo: 'Citrina', 'Citrina Text', 'Inter', system-ui, -apple-system, sans-serif; /* O mesmo desenho, cortado para tamanhos menores: títulos 4 e 5, display de card pequeno. A Citrina de display aperta abaixo de mais ou menos 24px. */ --inter-fonte-titulo-p: 'Citrina Text', 'Citrina', 'Inter', system-ui, -apple-system, sans-serif; --inter-fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --inter-fonte-codigo: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Tamanhos */ --inter-ts-display-g: 3.5rem; /* 56 */ --inter-ts-display: 2.75rem; /* 44 */ --inter-ts-titulo-1: 2.125rem; /* 34 */ --inter-ts-titulo-2: 1.625rem; /* 26 */ --inter-ts-titulo-3: 1.25rem; /* 20 */ --inter-ts-titulo-4: 1.0625rem;/* 17 */ --inter-ts-corpo-g: 1.0625rem;/* 17 */ --inter-ts-corpo: 0.9375rem;/* 15 */ --inter-ts-corpo-p: 0.875rem; /* 14 */ --inter-ts-legenda: 0.8125rem;/* 13 */ --inter-ts-rotulo: 0.75rem; /* 12 */ --inter-ts-codigo: 0.8125rem;/* 13 */ /* Alturas de linha — as do guideline, traduzidas para tela */ --inter-al-apertada: 1.05; --inter-al-titulo: 1.18; --inter-al-media: 1.35; --inter-al-corpo: 1.55; /* Pesos. Display sempre light na tela; ênfase se faz com laranja, nunca com negrito. Em slide a Citrina vai mais pesada — veja a seção 05. */ --inter-peso-display: 300; --inter-peso-leve: 300; --inter-peso-normal: 400; --inter-peso-medio: 500; --inter-peso-forte: 600; /* Espaçamento entre letras — o display anda em -2% */ --inter-el-display: -0.02em; --inter-el-titulo: -0.012em; --inter-el-normal: 0; --inter-el-rotulo: 0.01em; /* --------------------------------------------------------------------- 4. ESPAÇAMENTO — escala base 4, com as medidas do grid de marca (margem 32, gap entre cards 22, padding de card 36/40) --------------------------------------------------------------------- */ --inter-esp-0: 0; --inter-esp-1: 0.125rem; /* 2 */ --inter-esp-2: 0.25rem; /* 4 */ --inter-esp-3: 0.5rem; /* 8 */ --inter-esp-4: 0.75rem; /* 12 */ --inter-esp-5: 1rem; /* 16 */ --inter-esp-6: 1.375rem; /* 22 — gap entre cards */ --inter-esp-7: 1.5rem; /* 24 */ --inter-esp-8: 2rem; /* 32 — margem */ --inter-esp-9: 2.5rem; /* 40 — padding lateral de card */ --inter-esp-10: 3rem; /* 48 */ --inter-esp-11: 4rem; /* 64 — altura de header */ --inter-esp-12: 5rem; /* 80 */ /* --------------------------------------------------------------------- 5. RAIOS — o canto de 14 do guideline é o centro da escala --------------------------------------------------------------------- */ --inter-raio-p: 0.375rem; /* 6 — caixas de seleção, chips densos */ --inter-raio-m: 0.5rem; /* 8 — campos, botões, menus */ --inter-raio-g: 0.625rem; /* 10 — cards internos, blocos de código */ --inter-raio-gg: 0.875rem; /* 14 — cards e modais: o canto da marca */ --inter-raio-ggg: 1.125rem; /* 18 — painéis, drawers */ --inter-raio-painel: 1.5rem; /* 24 — superfícies de destaque, mídia */ --inter-raio-pilula: 999px; /* --------------------------------------------------------------------- 6. SOMBRAS — quase nenhuma. O guideline manda evitar sombra; o que sobra é o mínimo para dizer que uma camada flutua. --------------------------------------------------------------------- */ --inter-sombra-0: none; --inter-sombra-1: 0 1px 1px rgba(60, 51, 49, 0.04); --inter-sombra-2: 0 2px 6px -2px rgba(60, 51, 49, 0.08); --inter-sombra-3: 0 8px 20px -10px rgba(60, 51, 49, 0.14); --inter-sombra-4: 0 18px 40px -18px rgba(60, 51, 49, 0.20); --inter-sombra-foco: 0 0 0 2px var(--inter-foco-cor), 0 0 0 5px var(--inter-foco-anel); --inter-sombra-interna: inset 0 1px 2px rgba(60, 51, 49, 0.05); /* --------------------------------------------------------------------- 7. ÍCONES — pictogramas oficiais do template 2026, preenchidos --------------------------------------------------------------------- */ --inter-icone-p: 16px; --inter-icone-m: 20px; --inter-icone-g: 24px; --inter-icone-gg: 32px; /* --------------------------------------------------------------------- 8. MOVIMENTO --------------------------------------------------------------------- */ --inter-dur-imediata: 90ms; --inter-dur-rapida: 160ms; --inter-dur-media: 240ms; --inter-dur-lenta: 400ms; --inter-curva: cubic-bezier(0.32, 0.72, 0, 1); /* entradas e deslocamentos */ --inter-curva-saida: cubic-bezier(0.23, 1, 0.32, 1); /* saidas: parte rapido, assenta suave */ /* --------------------------------------------------------------------- 9. CAMADAS --------------------------------------------------------------------- */ --inter-z-base: 0; --inter-z-suspenso: 10; --inter-z-menu: 100; --inter-z-sobreposicao: 200; --inter-z-modal: 300; --inter-z-toast: 400; --inter-z-dica: 500; /* --------------------------------------------------------------------- */ --inter-largura-conteudo: 72ch; --inter-controle-altura-p: 32px; --inter-controle-altura-m: 40px; --inter-controle-altura-g: 48px; } /* ========================================================================== Tema Noite — só a camada semântica muda. Primitivos permanecem. O escuro é marrom queimado, não cinza: o mesmo palco, com a luz baixa. ========================================================================== */ [data-tema="noite"] { /* Avisa ao navegador que o tema é escuro: barras de rolagem e controles nativos acompanham, em vez de ficarem brancos. */ color-scheme: dark; --inter-fundo: #17120F; --inter-fundo-alternado: #1E1814; --inter-superficie: #221B17; --inter-superficie-sutil: #2A221D; --inter-superficie-forte: #352B24; --inter-superficie-neutra: #2F2721; --inter-superficie-inversa: var(--inter-areia-100); --inter-superficie-marca: #33200E; --inter-texto: #F7EFE6; --inter-texto-suave: #CBBDB3; --inter-texto-sutil: #A89A92; --inter-texto-invertido: #17120F; --inter-texto-marca: var(--inter-laranja-300); --inter-texto-desabilitado: #6E625C; --inter-borda: #352B24; --inter-borda-sutil: #2A221D; --inter-borda-forte: #4A3C33; --inter-borda-marca: var(--inter-laranja-400); /* No escuro o laranja ganha contraste de sobra: aqui a ação volta a ser laranja de marca, com rótulo escuro em cima. */ --inter-acao: var(--inter-laranja-400); --inter-acao-hover: var(--inter-laranja-300); --inter-acao-ativo: var(--inter-laranja-200); --inter-acao-sutil: #33200E; --inter-acao-sutil-hover: #422911; --inter-acao-texto: #17120F; --inter-acao-borda: #5E3B12; --inter-acao-marca: var(--inter-laranja-400); --inter-perigo: #E4685F; --inter-perigo-hover: #EE8880; --inter-perigo-sutil: #3A1B18; --inter-perigo-texto: #17120F; --inter-sucesso: #4FBF7E; --inter-sucesso-sutil: #152A1E; --inter-sucesso-texto: #8EDCAC; --inter-atencao: #E0AA3C; --inter-atencao-sutil: #2E2310; --inter-atencao-texto: #F0CE85; --inter-erro: #E4685F; --inter-erro-sutil: #331815; --inter-erro-texto: #F2A19B; --inter-info: #74A8E4; --inter-info-sutil: #17212E; --inter-info-texto: #A8C9F2; /* No escuro o caminho é o inverso: os pastéis da marca já têm luz de sobra contra o fundo queimado, então eles voltam a aparecer crus como texto. O que muda é a diluída, que vira uma sombra colorida do próprio acento. */ --inter-acento-azul-sutil: #243035; --inter-acento-menta-sutil: #28342B; --inter-acento-rosa-sutil: #3B2C31; --inter-acento-amarelo-sutil: #3B381F; --inter-acento-lilas-sutil: #332C35; --inter-acento-azul-texto: var(--inter-acento-azul); --inter-acento-menta-texto: var(--inter-acento-menta); --inter-acento-rosa-texto: var(--inter-acento-rosa); --inter-acento-amarelo-texto: var(--inter-acento-amarelo); --inter-acento-lilas-texto: var(--inter-acento-lilas); --inter-foco-anel: rgba(255, 140, 26, 0.32); --inter-foco-cor: var(--inter-laranja-400); --inter-selecionado: #33200E; --inter-sobreposicao: rgba(8, 5, 3, 0.66); --inter-sombra-1: 0 1px 1px rgba(0, 0, 0, 0.36); --inter-sombra-2: 0 2px 6px -2px rgba(0, 0, 0, 0.46); --inter-sombra-3: 0 8px 20px -10px rgba(0, 0, 0, 0.58); --inter-sombra-4: 0 18px 40px -18px rgba(0, 0, 0, 0.66); --inter-sombra-interna: inset 0 1px 2px rgba(0, 0, 0, 0.32); } @media (prefers-reduced-motion: reduce) { /* Encurta em vez de zerar: fusoes de cor e opacidade continuam legiveis, so o deslocamento perde forca. Os keyframes com movimento viram fusoes puras nos proprios arquivos de componente. */ :root { --inter-dur-imediata: 0ms; --inter-dur-rapida: 60ms; --inter-dur-media: 90ms; --inter-dur-lenta: 120ms; } }