/* GERADO por tokens_atlas.py. Não edite à mão: edite o gerador e rode de novo. O SISTEMA DE COR DO PAINEL ATLAS, em dois temas. Um só conjunto de NOMES; o tema decide os valores. Nenhuma tela deste painel conhece um hexadecimal: ela pede o papel (--texto-2, --superficie, --serie-3) e recebe a cor do tema em vigor. É o contrato do IBM Carbon, e é o que permite trocar de tema sem tocar em nenhum arquivo do painel. As cores saem de escalas tonais em OKLCH, uma por matiz, com o croma caindo nas pontas. O cobre da marca (#A9713F) é o degrau 60 da sua escala: no tema claro ele é o acento; no escuro o acento sobe para o degrau 50, porque o cobre cru sobre fundo escuro dá 3,4:1 e não passa em AA. A marca não muda de matiz entre os temas, muda de TOM, exatamente como o Material 3 faz com a cor-fonte de uma paleta tonal. Os tokens terminados em `-texto` não são escolhidos: são CALCULADOS, andando na escala do mesmo matiz até alcançar 4,5:1 sobre a superfície. Cor de marca serve para pintar; para escrever, quase nunca serve crua. */ :root { color-scheme: light; --fundo: #F3F5F8; --superficie: #FFFFFF; --superficie-2: #F3F5F8; --superficie-3: #E4E8ED; --hover: #DFE4EA; --borda: #CED5DE; --borda-forte: #B1BCC9; --texto: #06090F; --texto-2: #3E4C5E; --texto-3: #5C6978; --texto-invertido: #FFFFFF; --acento: #A9713F; --acento-forte: #9C622C; --acento-sutil: #F4E5D9; --azul: #2D6CB5; --verde: #136847; --vermelho: #A0210B; --ambar: #996608; --ameixa: #6E5E8C; --teal: #1F7A8C; --serie-1: #06090F; --serie-2: #A9713F; --serie-3: #136847; --serie-4: #2D6CB5; --serie-5: #A0210B; --serie-6: #6E5E8C; --serie-7: #3E4C5E; --serie-8: #996608; --serie-9: #1F7A8C; --serie-10: #75A5DF; --serie-11: #D8B293; --serie-12: #A69AC0; --rampa-de: #FAFBFC; --rampa-ate: #001332; --sombra: rgba(6, 9, 15, .07); --acento-texto: #925C29; --azul-texto: #2968B1; --verde-texto: #136847; --vermelho-texto: #A0210B; --ambar-texto: #8C5C01; --ameixa-texto: #6E5E8C; --teal-texto: #0C6F81; --rampa-1: #FAFBFC; --rampa-2: #E3E6EA; --rampa-3: #CDD1D7; --rampa-4: #B6BCC5; --rampa-5: #9FA7B3; --rampa-6: #8892A0; --rampa-7: #727C8E; --rampa-8: #5B677B; --rampa-9: #445269; --rampa-10: #2D3D57; --rampa-11: #172844; --rampa-12: #001332; --cobre-10: #FCF3ED; --cobre-20: #F4E5D9; --cobre-30: #E8CFBA; --cobre-40: #D8B293; --cobre-50: #C6966F; --cobre-60: #A9713F; --cobre-70: #9C622C; --cobre-80: #804809; --cobre-90: #552C00; --cobre-95: #3A1B00; --cobre-100: #240C00; --cobre-110: #150500; --neutro-10: #F3F5F8; --neutro-20: #E4E8ED; --neutro-30: #CED5DE; --neutro-40: #B1BCC9; --neutro-50: #96A3B3; --neutro-60: #7D8A9B; --neutro-70: #667383; --neutro-80: #3E4C5E; --neutro-90: #2D3947; --neutro-95: #1B2531; --neutro-100: #0E141D; --neutro-110: #06090F; --azul-10: #EFF6FF; --azul-20: #DBE9FB; --azul-30: #BED7F6; --azul-40: #99BEEC; --azul-50: #75A5DF; --azul-60: #548CCF; --azul-70: #2D6CB5; --azul-80: #17589E; --azul-90: #00376F; --azul-95: #00234E; --azul-100: #001332; --azul-110: #00081F; --verde-10: #EFF8F3; --verde-20: #DDECE4; --verde-30: #C0DCCD; --verde-40: #9BC6B0; --verde-50: #78B094; --verde-60: #569979; --verde-70: #2E7D5B; --verde-80: #136847; --verde-90: #00442B; --verde-95: #002D1B; --verde-100: #001A0D; --verde-110: #000E05; --vermelho-10: #FFF2EF; --vermelho-20: #FFE0D9; --vermelho-30: #FCC5BA; --vermelho-40: #F3A393; --vermelho-50: #E5826F; --vermelho-60: #D4614D; --vermelho-70: #C0442F; --vermelho-80: #A0210B; --vermelho-90: #6C0B00; --vermelho-95: #4B0200; --vermelho-100: #310000; --vermelho-110: #1E0000; --ambar-10: #FEF3E7; --ambar-20: #F7E5CE; --ambar-30: #EECFA6; --ambar-40: #E0B172; --ambar-50: #C98A21; --ambar-60: #B87B02; --ambar-70: #996608; --ambar-80: #784E00; --ambar-90: #4E3100; --ambar-95: #341F00; --ambar-100: #200F00; --ambar-110: #150500; --ameixa-10: #F6F4FA; --ameixa-20: #E9E6F1; --ameixa-30: #D7D0E5; --ameixa-40: #BEB5D3; --ameixa-50: #A69AC0; --ameixa-60: #8F81AB; --ameixa-70: #6E5E8C; --ameixa-80: #5E4F7B; --ameixa-90: #3D3053; --ameixa-95: #281E39; --ameixa-100: #170F23; --ameixa-110: #0B0614; --teal-10: #EEF7F9; --teal-20: #DBEBF0; --teal-30: #BDDAE2; --teal-40: #96C3CF; --teal-50: #71ACBB; --teal-60: #4C95A6; --teal-70: #1F7A8C; --teal-80: #006374; --teal-90: #00404B; --teal-95: #002A32; --teal-100: #00181E; --teal-110: #000C12; /* AS CORES DA MARCA, IGUAIS NOS DOIS TEMAS. Elas não são papéis: são a assinatura. A capa do login é midnight com a marca em reverse, e continua midnight no tema claro e no escuro, porque é dela que vem o contraste da assinatura. Por isso NÃO são redefinidas nos blocos de tema abaixo. Existirem como token, e não como hexadecimal solto na tela, é o que as tira da regra "cor fora do sistema" sem abrir exceção para o arquivo inteiro: elas estão DENTRO do sistema, na parte dele que não muda. */ --marca-tinta: #0F1E2C; /* midnight, o fundo da capa */ --marca-osso: #F3EEE4; /* a tinta clara da assinatura em reverse */ --marca-osso-2: #D9D3C6; /* o descritor e as curvas de nível */ --marca-cobre: #A9713F; /* a cancela */ /* A TINTA DA MARCA, esta SIM acompanha o tema. As quatro acima são fixas porque descrevem a CAPA, uma superfície que é midnight nos dois temas. Esta é outra coisa: é a tinta com que a marca é desenhada quando ela cai numa superfície DO TEMA (o cabeçalho, um véu, um card). Sobre claro ela é midnight; sobre escuro ela é osso. Ela existe para aposentar o `filter: invert(1)`, que era como a marca escurecia antes. O filtro inverte TUDO, inclusive o cobre da cancela, e precisa ser desligado a mão em cada lugar onde a marca já está em reverse — foi assim que a assinatura sumiu da capa do login. Um token diz o que a tinta É; um filtro tenta adivinhar. */ --marca-ink: #0F1E2C; --marca-descritor: #3E4C5E; --fonte: Onest, 'Helvetica Neue', Arial, sans-serif; --raio: 0px; /* o sistema Atlas separa por hairline e canto vivo */ --hairline: 1px solid var(--borda); } /* A SELEÇÃO DE TEXTO TAMBÉM É COR DO SISTEMA. Sem declarar, ela fica com o padrão do navegador, que escolhe sozinho o par fundo/letra e não sabe nada dos tokens: no calendário, selecionar uma linha pintava o rótulo `EDITAL` de claro sobre a célula clara e ele sumia. É o mesmo defeito de par de sempre, num lugar em que ninguém pensa em olhar, porque só aparece com o texto selecionado. `-webkit-text-fill-color` junto com `color` porque, num texto que usa `background-clip:text` ou herda `-webkit-text-fill-color`, só `color` não vence. */ ::selection { background: var(--acento-sutil); color: var(--texto); -webkit-text-fill-color: var(--texto); } /* O tema segue o sistema por padrão... */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --fundo: #06090F; --superficie: #0E141D; --superficie-2: #1B2531; --superficie-3: #2D3947; --hover: #272F3A; --borda: #2D3947; --borda-forte: #3E4C5E; --texto: #F3F5F8; --texto-2: #B1BCC9; --texto-3: #96A3B3; --texto-invertido: #06090F; --acento: #C6966F; --acento-forte: #D8B293; --acento-sutil: #2F2B2C; --azul: #99BEEC; --verde: #78B094; --vermelho: #E5826F; --ambar: #E0B172; --ameixa: #BEB5D3; --teal: #96C3CF; --serie-1: #E4E8ED; --serie-2: #C6966F; --serie-3: #78B094; --serie-4: #99BEEC; --serie-5: #E5826F; --serie-6: #BEB5D3; --serie-7: #96A3B3; --serie-8: #E0B172; --serie-9: #96C3CF; --serie-10: #DBE9FB; --serie-11: #E8CFBA; --serie-12: #E9E6F1; --rampa-de: #1B2531; --rampa-ate: #BED7F6; --sombra: rgba(0, 0, 0, .40); --acento-texto: #C6966F; --azul-texto: #99BEEC; --verde-texto: #78B094; --vermelho-texto: #E5826F; --ambar-texto: #E0B172; --ameixa-texto: #BEB5D3; --teal-texto: #96C3CF; --rampa-1: #1B2531; --rampa-2: #2A3543; --rampa-3: #394555; --rampa-4: #475667; --rampa-5: #566679; --rampa-6: #65768B; --rampa-7: #74869C; --rampa-8: #8396AE; --rampa-9: #92A6C0; --rampa-10: #A0B7D2; --rampa-11: #AFC7E4; --rampa-12: #BED7F6; } } /* A TINTA DA MARCA no tema escuro. Fica fora dos blocos de papel porque não é papel: é a tinta da assinatura, e ela tem exatamente dois valores. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --marca-ink: #F3EEE4; --marca-descritor: #D9D3C6; } } [data-tema="escuro"] { --marca-ink: #F3EEE4; --marca-descritor: #D9D3C6; } [data-tema="claro"] { --marca-ink: #0F1E2C; --marca-descritor: #3E4C5E; } /* ...e a escolha explícita do usuário vence, nos dois sentidos. */ [data-tema="escuro"] { color-scheme: dark; --fundo: #06090F; --superficie: #0E141D; --superficie-2: #1B2531; --superficie-3: #2D3947; --hover: #272F3A; --borda: #2D3947; --borda-forte: #3E4C5E; --texto: #F3F5F8; --texto-2: #B1BCC9; --texto-3: #96A3B3; --texto-invertido: #06090F; --acento: #C6966F; --acento-forte: #D8B293; --acento-sutil: #2F2B2C; --azul: #99BEEC; --verde: #78B094; --vermelho: #E5826F; --ambar: #E0B172; --ameixa: #BEB5D3; --teal: #96C3CF; --serie-1: #E4E8ED; --serie-2: #C6966F; --serie-3: #78B094; --serie-4: #99BEEC; --serie-5: #E5826F; --serie-6: #BEB5D3; --serie-7: #96A3B3; --serie-8: #E0B172; --serie-9: #96C3CF; --serie-10: #DBE9FB; --serie-11: #E8CFBA; --serie-12: #E9E6F1; --rampa-de: #1B2531; --rampa-ate: #BED7F6; --sombra: rgba(0, 0, 0, .40); --acento-texto: #C6966F; --azul-texto: #99BEEC; --verde-texto: #78B094; --vermelho-texto: #E5826F; --ambar-texto: #E0B172; --ameixa-texto: #BEB5D3; --teal-texto: #96C3CF; --rampa-1: #1B2531; --rampa-2: #2A3543; --rampa-3: #394555; --rampa-4: #475667; --rampa-5: #566679; --rampa-6: #65768B; --rampa-7: #74869C; --rampa-8: #8396AE; --rampa-9: #92A6C0; --rampa-10: #A0B7D2; --rampa-11: #AFC7E4; --rampa-12: #BED7F6; } [data-tema="claro"] { color-scheme: light; --fundo: #F3F5F8; --superficie: #FFFFFF; --superficie-2: #F3F5F8; --superficie-3: #E4E8ED; --hover: #DFE4EA; --borda: #CED5DE; --borda-forte: #B1BCC9; --texto: #06090F; --texto-2: #3E4C5E; --texto-3: #5C6978; --texto-invertido: #FFFFFF; --acento: #A9713F; --acento-forte: #9C622C; --acento-sutil: #F4E5D9; --azul: #2D6CB5; --verde: #136847; --vermelho: #A0210B; --ambar: #996608; --ameixa: #6E5E8C; --teal: #1F7A8C; --serie-1: #06090F; --serie-2: #A9713F; --serie-3: #136847; --serie-4: #2D6CB5; --serie-5: #A0210B; --serie-6: #6E5E8C; --serie-7: #3E4C5E; --serie-8: #996608; --serie-9: #1F7A8C; --serie-10: #75A5DF; --serie-11: #D8B293; --serie-12: #A69AC0; --rampa-de: #FAFBFC; --rampa-ate: #001332; --sombra: rgba(6, 9, 15, .07); --acento-texto: #925C29; --azul-texto: #2968B1; --verde-texto: #136847; --vermelho-texto: #A0210B; --ambar-texto: #8C5C01; --ameixa-texto: #6E5E8C; --teal-texto: #0C6F81; --rampa-1: #FAFBFC; --rampa-2: #E3E6EA; --rampa-3: #CDD1D7; --rampa-4: #B6BCC5; --rampa-5: #9FA7B3; --rampa-6: #8892A0; --rampa-7: #727C8E; --rampa-8: #5B677B; --rampa-9: #445269; --rampa-10: #2D3D57; --rampa-11: #172844; --rampa-12: #001332; } /* ── A MESMA IDEIA, DO OUTRO LADO DA RÉGUA ─[escala-tipografica]─────────────── No monitor o texto cresce com a tela. No aparelho o limite não é a proporção, é a mão: abaixo de 12px a leitura em movimento cansa, e um campo com menos de 16px faz o iOS ampliar a página inteira ao receber o foco, o que desloca tudo e não volta sozinho. Por isso o piso do aparelho é MAIOR que o do monitor, não menor. É a mesma régua ("cada tela recebe o tamanho que ela pede"), lida no outro sentido. */ :root { --piso-tela: 0px; } @media (max-width: 768px) { :root { --piso-tela: 12px; } /* O CAMPO É CASO À PARTE, e o `!important` aqui não é preguiça. Abaixo de 16px o iOS AMPLIA a página inteira ao focar o campo, e ela não volta sozinha: o efeito não é estético, é a tela saindo do lugar na mão de quem digita. Vencer, sem enumerar todas as classes do painel, exige isto. */ input, select, textarea { font-size: max(16px, 1em) !important; } }