/* ========================================================= MathAI — Chat de Matemática Estilos base. Organização: 1. Tokens (variáveis de tema claro/escuro) 2. Reset / base 3. Layout (topbar, conversa, composer) 4. Componentes (botões, bolhas, chips, anexos) 5. Estados (typing, drag-and-drop, empty) 6. Responsividade ========================================================= */ /* ---------- Fonte da MATEMÁTICA DO CHAT (id0103) ---------- Computer Modern "no formato de equação", como o LaTeX compõe: LETRAS em itálico (a variável parece variável), NÚMEROS, OPERADORES e pontuação EM PÉ ("3x + 2 = 11": só o x inclinado). Antes a linha inteira ia em itálico, números e sinais inclusive — era o que ficava feio. Só CSS, sem tocar no HTML que o renderMarkdown gera (a lousa lê o textContent dele): uma família composta por `unicode-range`. A face em pé cobre tudo; a itálica, declarada DEPOIS, cobre só as letras (latinas, acentuadas e gregas minúsculas — o grego maiúsculo, como Δ, fica em pé, também como no LaTeX) e vence nelas. Os arquivos são os mesmos da CMU Serif que o já carrega, do mesmo pacote no jsDelivr (a CSP já libera): o navegador reaproveita o cache. SÓ O CHAT: é uma família com nome próprio, lida por `--font-mat`. */ @font-face { font-family: 'Facin Mat'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-500-roman.woff2') format('woff2'); } @font-face { font-family: 'Facin Mat'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-700-roman.woff2') format('woff2'); } @font-face { font-family: 'Facin Mat'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-500-italic.woff2') format('woff2'); unicode-range: U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+03B1-03C9, U+03D1, U+03D5, U+03F5; } @font-face { font-family: 'Facin Mat'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/npm/computer-modern@0.1.2/fonts/cmu-serif-700-italic.woff2') format('woff2'); unicode-range: U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+03B1-03C9, U+03D1, U+03D5, U+03F5; } /* ---------- 1. Tokens de tema ---------- DOIS TEMAS (Lote C, id0124). O `:root` é o ESCURO, como sempre foi (desde a id0027 o app tinha tema único escuro); o CLARO é o bloco `:root[data-theme="light"]` logo abaixo, com a mesma paleta em outra luminância. Quem escolhe o tema é o tema.js, no , antes da primeira pintura. REGRA: o tema mora SÓ nestes dois blocos. Nenhuma regra de componente pergunta pelo tema — ela lê o token, e o token muda (teste T1). Nada de light-dark(): só existe a partir do Safari 17.5. */ :root { color-scheme: dark; /* Paleta neutra + um único tom de destaque (accent). Os neutros são FRIOS desde a id0079. Até então eram quentes (--bg era #0e0e0d, R>G>B, cast oliva) enquanto o giz da lousa sempre foi frio; giz frio sobre cinza oliva é o que deixava a tela embaçada. Esfriar o neutro faz o giz saltar SEM tocar no giz — que é notação, e não se repinta. */ /* Caderno premium (out/2026, design/caderno-2026-10): os neutros são o PAPEL e a TINTA. No escuro, a ardósia verde da lousa (--papel) com giz (--tinta); o --surface é a folha (--folha). Os nomes antigos continuam (css/02 a 08 os leem) e apontam para a paleta nova; os nomes do desenho (--papel, --tinta...) estão mais abaixo. */ --bg: #1c2825; --bg-subtle: #172220; --surface: #24352f; --surface-2: #2c403a; --border: #3e4742; --border-strong: #686e66; --text: #efe9da; --text-muted: #c3c9bd; --text-faint: #8f9a93; /* Destaque único (usado em ações principais e foco). Era terracota (id0027, "no espírito do Claude"); virou AZUL SAFIRA na id0053, a pedido do usuário: um app de matemática deve transmitir calma, não o alerta/ansiedade que tom quente carrega. Vale para TODO componente de interface — botões, ícones ativos, foco, o logo, o brilho do fundo. NÃO inclui o giz da lousa (--giz-vermelho/azul/verde, mais abaixo): aquelas três cores são NOTAÇÃO, com significado fixo definido pelo usuário num mockup (id0016) — vermelho é só rótulo de etapa, por exemplo. Repintar o giz vermelho de azul colidiria com o giz azul (que já significa outra coisa: incógnita intermediária) e apagaria uma distinção pedagógica. `--on-accent` teve de INVERTER de escuro para claro: azul tem teto de luminância bem mais baixo que terracota (o canal que mais pesa na luminância percebida é o verde, não o azul), então o accent agora é mais escuro que antes — texto escuro sobre ele ficaria ilegível. id0079: o accent DEIXOU de ser o safira #1b63d6 e passou a ser o próprio --giz-azul. Não é troca de tom, é troca de fonte da verdade: o produto já tinha uma paleta autoral presa dentro da lousa, e o chrome usava outra. Agora é uma só. O giz continua sendo notação e não mudou de valor — quem se mudou foi o chrome, que passou a APONTAR para ele. Por que DOIS azuis: #5aa9ff é claro (7,9:1 sobre o --bg) e serve a texto, ícone, borda e trilho; como FUNDO de botão ele exigiria tinta escura. O --accent-forte é o par escuro para fundo cheio — 5,03:1 sob --on-accent, medido, e matiz 214° contra 211° do giz-azul, ou seja, a mesma família. */ /* Caderno premium: o --accent é a SEGUNDA TINTA (o roxo: foco, aba ativa, destaque, fala do aluno); o botão cheio (--accent-forte) é a própria TINTA, com o papel por cima (--on-accent = --sobre-tinta). */ --accent: #cdb8ff; /* = --roxo: texto, ícone, borda, trilho */ --accent-forte: #efe9da; /* = --tinta: fundo de botão cheio */ --accent-hover: #ffffff; --accent-soft: #323940; --on-accent: #1c2825; /* Semânticos. Apontam para o giz, pelo mesmo motivo do --accent: uma paleta só. Não são cópias — se o giz mudar, estes acompanham. */ --ok: var(--giz-verde); --atencao: var(--giz-vermelho); /* id0124: o vermelho de INTERFACE (sair, erro de formulário, desligar a 2FA, conta suspensa, erro da consulta do gráfico). Era #ff8a8a literal em cada regra; virou token para ter valor no tema claro. */ --perigo: #ff9d8f; /* Tinta sobre o --accent no hover. */ --on-accent-hover: #1c2825; /* Botão "Continuar com o Google": a variante escura da MARCA (as cores são do Google, não da paleta; no claro vale a variante clara da marca). */ --google-fundo: #131314; --google-contorno: #8E918F; --google-texto: #E3E3E3; --google-hover: #1f1f20; /* Cabeçalho do painel da lousa: um tom acima do quadro, nos dois temas (decisão do Beny, id0124). No escuro, o --surface-2. */ --painel-cabecalho: #1c2825; /* ---- Roda de ajustes (id0057) ---- As 7 cores são do USUÁRIO, uma por opção, e não são decorativas: é por elas que a combinação escolhida continua legível no botão pequeno, agora que os três rótulos em texto ("Auto", "Normal") saíram da barra. Cada cor traz a sua TINTA — o texto que vai por cima da fatia. Sem esse par o rótulo sumia: ouro e branco pedem tinta escura, o neutro pede clara. `--roda-neutro` é o estado "nada escolhido" (Auto e Sem desenho): um cinza de interface, na mesma família fria do resto, para ler como apagado ao lado do ouro e do verde — e não como mais uma escolha. */ --roda-ouro: #e0b64d; /* Modelo Pro */ --roda-ouro-tinta: #1a1509; --roda-cinza: #cfd2d6; /* Modelo Padrão — branco acinzentado */ --roda-cinza-tinta: #16181a; --roda-verde: #86dfa0; /* Modo Solucionar — verde claro */ --roda-verde-tinta: #0d2114; --roda-azul: #5c9df2; /* Modo Conceito */ --roda-azul-tinta: #071426; --roda-branco: #ffffff; /* Modo desenho — branco bem brilhante */ --roda-branco-tinta: #101010; --roda-neutro: #3a3d42; /* Modo auto / sem desenho */ --roda-neutro-tinta: #d6d8dc; /* `-luz` é a versão da cor para TEXTO, e só o neutro precisa: como preenchimento ele é um cinza escuro, e o nome da opção escrito nele sumiria no fundo da roda. As outras cinco já são claras e caem no fallback do `var(--roda--luz, var(--roda-))`, sem token a mais. */ --roda-neutro-luz: #9aa2ae; /* id0145: desenho preto em PNG (o boneco, a carinha) lido na cor do tema: no escuro ele inverte para branco, no claro fica como é. */ --traco-desenho: invert(1); /* Bolhas de mensagem. A do aluno era cinza chapado (#212120) e desaparecia no fundo; na id0079 ganhou tinta do accent, para a fala DELE ter cor própria na tela — é a única coisa ali que ele escreveu. */ --user-bubble: #24352f; --user-borda: #3e4742; --user-text: #efe9da; /* ---- Forma (Lote C, Fase 3 — research_notes/briefing-redesign-ui.md §4) ---- O redesign da id0099 zerou raio e sombra; os testadores pediram a UI arredondada de volta. Uma escala curta, e NENHUM componente escreve número de raio ou de sombra direto (tests/test-forma.js): p 8px itens de menu e de lista, miniaturas, a marca controle 12px botões, campos, avisos, anexos superficie 16 cartões, menu, balão do tutorial, a bolha do aluno destaque 20px o composer e os diálogos circulo botões de ícone quadrados, avatar, pontos capsula só a pílula do Google (a marca permite) reto o que continua reto de propósito (conteúdo da resposta, as peças internas dos grupos colados, o anel do tutorial — que recebe o raio do alvo pelo JS) O "-dentro" é o raio de quem mora DENTRO de uma borda de 1px com aquele raio (os blocos colados das sugestões, dos planos e da linha do tutorial). A lousa guarda os raios dela (0), que não passam por estes tokens. A SOMBRA não mora aqui: tem valor por tema, nos dois blocos de cor. */ --raio-p: 8px; --raio-controle: 12px; --raio-superficie: 16px; --raio-destaque: 20px; --raio-circulo: 50%; --raio-capsula: 999px; --raio-reto: 0; --raio-controle-dentro: calc(var(--raio-controle) - 1px); --raio-superficie-dentro: calc(var(--raio-superficie) - 1px); /* id0125: o polegar do segmento, dentro do trilho de 3px de recuo. */ --raio-polegar: var(--raio-capsula); /* redesign (out/2026): o polegar das barras é cápsula (era controle - 3px) */ --fio: 1px solid var(--border); /* o que separa as coisas */ --fio-forte: 1px solid var(--border-strong); --maxw: 760px; /* largura máxima da coluna de conversa */ --transition: 160ms cubic-bezier(.4,0,.2,1); /* ---- Movimento ---- `--ease-saida` no clique e em transform curto (.14s); `--ease-corte` nos cortes diagonais e nas revelações por clip-path (.4s). Revelação acontece UMA vez, na entrada da tela; tudo desliga com prefers-reduced-motion. */ --ease-saida: cubic-bezier(.16, 1, .3, 1); --ease-corte: cubic-bezier(.25, 0, 0, 1); --dur-clique: .14s; --dur-corte: .4s; /* ---- Grade (páginas inteiras: abertura, login, planos) ---- */ --grade-gap: clamp(16px, 2.1vw, 32px); --calha: clamp(20px, 5vw, 76px); /* ---- Tipografia (id0099) ---- TASA Orbiter na interface e na prosa. Geist Mono ficou só onde é função (códigos da 2FA, o admin, a resposta e a lousa): os rótulos do chrome saíram dele no Lote C. O template usa 11px no rótulo e 9px no selo; aqui o MÍNIMO é 12px — o público tem de 11 a 17 anos e lê no celular. --font-display e --font-hero continuam como nomes (muitas regras os usam), mas apontam para a mesma família: o peso é que faz o título. */ --font: 'TASA Orbiter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font); --font-hero: var(--font); /* Caderno premium: a letra de mão do professor (Kalam) nos títulos, balões, legendas e na lousa inteira. */ --font-giz: 'Kalam', 'Playpen Sans', 'Caveat', cursive; --fs-titulo: clamp(36px, 4.4vw, 44px); --peso-titulo: 660; --lh-titulo: 1.05; --tracking-titulo: -.04em; --fs-rotulo: 12px; --peso-rotulo: 620; --tracking-rotulo: .12em; /* Lote C, Fase 3: os rótulos e controles do chrome saíram do mono em caixa alta (o "jeito de terminal" que o briefing pediu para tirar). 13px no rótulo (o mínimo de 12 continua), 15px no controle, 14px nos controles apertados do tutorial; o tracking é o natural da fonte. */ --fs-etiqueta: 13px; --fs-controle: 15px; --fs-controle-compacto: 14px; --tracking-ui: 0; /* Os rótulos dos DESENHOS da lousa (figText no app.js — é o único leitor). id0126b, pedido do usuário: a mesma manuscrita das contas (Kalam), para o quadro inteiro ler como giz. Foi Kalam até a id0055, CMU de lá até aqui (o motivo da troca era o 0/6 e o 1/7 manuscritos; o usuário preferiu o tema). A largura média da Kalam medida no Chrome é a mesma da CMU (0,49 × 0,50 do corpo), então o figLarguraTexto segue valendo. */ --font-calc: 'Kalam', 'Playpen Sans', 'Caveat', cursive; /* A matemática do CHAT (id0103): a família composta acima — letras em itálico, números e operadores em pé. */ --font-mat: 'Facin Mat', 'CMU Serif', 'Latin Modern Roman', Georgia, 'Times New Roman', serif; --font-mono: 'Geist Mono', "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace; /* --onda (a cor do fundo de ondas do chat e do brilho do login) saiu na id0101: o canvas saiu na id0100 e o login virou campo de cor cheia (--accent-forte). */ /* Gizes coloridos do quadro — tons CLAROS e vivos sobre a ardósia escura. DE PROPÓSITO fora do retinte quente→frio da id0053 (ver nota do --accent acima): o SIGNIFICADO de cada cor é fixo, e é o do mockup do usuário: vermelho → só os rótulos de etapa ("Dados:", "Passo 1:") azul → só o resultado de uma incógnita INTERMEDIÁRIA verde → só a resposta final (circulada, 10% maior) As operações e as descrições saem em --quadro-giz (branco). */ /* Caderno premium: as três tintas da lousa à noite (giz sobre a ardósia), o significado é o mesmo. */ --giz-vermelho: #ff9d8f; --giz-azul: #9ec5ff; --giz-verde: #a8e4b1; /* id0106 — AMARELO = a CONSULTA DO ALUNO no gráfico de função (o par ordenado que ele pediu, no modo Organizar). Cor nova porque o significado é novo: não é etapa (vermelho), nem incógnita (azul), nem resposta (verde) — é o que o aluno perguntou ao gráfico. */ --giz-amarelo: #ffd166; /* id0111 — BLOCOS PINTADOS dos desenhos (barra de fração, fita, eventos de probabilidade). Pedido do usuário: paleta ALTERNATIVA, fora das cores do texto do quadro — o azul que pintava as barras é a cor da incógnita intermediária. Um evento/grupo por cor, nesta ordem. */ --bloco-roxo: #b48cff; --bloco-amarelo: #ffd166; --bloco-laranja: #ff9f5a; --bloco-rosa: #ff7eb6; /* ---- A LOUSA (o artefato) ---- Painel PRETO, um tom acima do fundo do app (--bg é #0e0e0d), com giz claro. Até a id0030 era ardósia VERDE com moldura de MADEIRA; a id0031 tirou as duas cores a pedido do usuário — "apenas um quadro". A moldura sobrevive como token, mas virou um fio neutro em vez de madeira. É o único conjunto de tokens que o desenho e a escrita da lousa usam: nada de paleta fixa no JS (ver E4 — var() não resolve como atributo SVG, então o SVG herda a cor por `color:` no container). */ /* id0104 — a lousa entrou no design do site: o quadro deixou o cinza quente (#1c1c1b, com moldura oliva) e passou para a mesma família FRIA do app — o fundo do quadro é o --bg-subtle, a camada de cima (balões, campo de pergunta) é o --surface e a moldura é o fio forte. O giz (branco e as três cores de notação) NÃO mudou: é a escrita, não a moldura. */ /* Caderno premium: a lousa é a FOLHA (de dia, papel quadriculado; à noite, a ardósia verde com giz). */ --quadro-bg: #24352f; --quadro-bg-2: #2c403a; --quadro-giz: #efe9da; /* SILHUETAS TEMÁTICAS (playbooks/silhuetas): traço em giz + até 3 cores de ÁREA (fill-opacity .55 a .85 no svg). Sem significado de notação: são ilustração do enunciado ("a cena do problema"), não cor de etapa. */ --sil-traco: #efe9da; --sil-1: #e8a33d; --sil-2: #5fa8d3; --sil-3: #8bc34a; --quadro-poeira: rgba(239, 233, 218, .055); --quadro-moldura: #686e66; --quadro-moldura-2:#3e4742; /* id0249 (B2) — REALCE de um bloco já na lousa (ensinar_conceito). Caderno premium: a segunda tinta (o roxo), como o passo em destaque do desenho. Pinta o bloco, estende o fundo para fora (box-shadow) e põe um contorno fino (outline): nada disso ocupa espaço. */ --realce-fundo: rgba(205, 184, 255, .12); --realce-borda: #cdb8ff; /* id0254 — VEREDITO da resposta do aluno (verde = acertou, vermelho = errou). Os mesmos tons do giz, por tema. */ --acerto: #a8e4b1; --acerto-fundo: rgba(168, 228, 177, .16); --erro: #ff9d8f; --erro-fundo: rgba(255, 157, 143, .16); /* id0256 — a PERGUNTA ao aluno na lousa. Caderno premium: a segunda tinta (o roxo), a mesma do destaque. */ --pergunta: #cdb8ff; --pergunta-fundo: rgba(205, 184, 255, .10); /* ---- CASULO DA LOUSA, por tema (id0124) ---- Até aqui o casulo congelava estes valores escritos à mão nas raízes da lousa. Com a lousa clara no tema claro (decisão do Beny), eles viram tokens com um valor por tema — o casulo continua isolando a lousa dos tokens do CHROME, só que agora por tema. No escuro, os valores de sempre (o retrato do escuro tem de dar 0). `--casulo-bg` é novo: a aba e a ferramenta ATIVAS da lousa pintam o texto com --bg, que o casulo não congelava (achado da Fase 1). */ --casulo-accent: #cdb8ff; --casulo-border: #3e4742; --casulo-border-strong: #686e66; --casulo-surface-2: #2c403a; --casulo-text: #efe9da; --casulo-text-muted: #c3c9bd; --casulo-text-faint: #8f9a93; --casulo-bg-subtle: #24352f; --casulo-bg: #24352f; /* O ícone do botão de tema mostra o tema do CLIQUE: sol no escuro, lua no claro. Por token, para a regra do botão não perguntar pelo tema (T1). */ --tema-icone-sol: block; --tema-icone-lua: none; /* SOMBRAS (Lote C, Fase 3), uma por tema. No escuro a elevação vem do contraste entre --bg/--surface/--surface-2: menu e diálogo não levam sombra (no fundo quase preto ela vira mancha, não profundidade). A ação primária ganha a BASE de apertar: 3px sólidos, no azul dela misturado ao fundo (sem preto fixo, sem brilho); apertada, a base vai a 1px. O foco do campo é um segundo fio do accent, por dentro (não muda o tamanho). */ --sombra-acao: 0 3px 0 color-mix(in srgb, var(--accent-forte) 55%, var(--bg)); --sombra-acao-apertada: 0 1px 0 color-mix(in srgb, var(--accent-forte) 55%, var(--bg)); --sombra-flutuante: var(--sombra-folha); --sombra-foco: inset 0 0 0 1px var(--accent); /* O selo "Seu plano"/"Recomendado" dentro do bloco cheio de tinta dos planos: o papel por cima. */ --selo-destaque: #1c2825; --seg-polegar-suave: #2c403a; /* id0125: a aba escolhida do seletor de cor */ /* ---- CADERNO PREMIUM (out/2026, design/caderno-2026-10/tokens.css) — fundação ---- Só TOKENS. Os testes T1c/F3c obrigam o tema e o raio a morar nestes dois blocos (um `:root` e um `:root[data-theme="light"]`), então é aqui — e não no css/09-redesign.css, onde mora o visual — que eles entram. À noite: a ardósia verde da lousa com giz. Nenhum vidro, nenhuma aurora, nenhum ouro metálico: uma tinta só (--tinta), uma segunda tinta (--roxo) e o único ouro do app (--marcador). */ --papel: #1c2825; /* o fundo de tudo */ --papel2: #172220; /* a margem do caderno (a sidebar do computador) */ --folha: #24352f; /* a lousa, os cartões de papel, as páginas */ --tinta: #efe9da; /* a única cor de estrutura: texto, botões cheios, o boneco */ --tinta2: #c3c9bd; /* texto secundário */ --lapis: #8f9a93; /* anotações a lápis (13px para cima), placeholders, desativado */ --linha: rgba(239, 233, 218, .16); --linha2: rgba(239, 233, 218, .36); --grade: transparent; /* o quadriculado some à noite */ --roxo: #cdb8ff; --roxo-soft: rgba(205, 184, 255, .12); --marcador: #e6b94a; --marcador-tinta: #2d2100; --vermelho: #ff9d8f; --azul: #9ec5ff; --verde: #a8e4b1; --sobre-tinta: #1c2825; --grao: radial-gradient(rgba(255, 255, 255, .03) .5px, transparent .8px), radial-gradient(rgba(255, 255, 255, .02) .5px, transparent .8px); --veu-folha: rgba(0, 0, 0, .45); /* o véu atrás do cartão dos planos */ /* Raios do desenho (a escala de cima não muda; F3 a trava). */ --raio-cartao: 20px; /* os cartões de papel (o cartão da aula, a página do caderno) */ --raio-folha: 22px; /* a lousa e os cartões grandes (login, planos) */ --raio-balao: 18px; /* o balão de fala */ --raio-marca: 2px; /* a passada do marcador */ --raio-rab-a: 22px; /* .rabisco: os quatro cantos assimétricos (22 26 24 28 / 26 22 28 24) */ --raio-rab-b: 26px; --raio-rab-c: 24px; --raio-rab-d: 28px; /* Sombras (uma por tema), sem cor literal (F2d): derivam da margem escura (--papel2) e da tinta. */ --sombra-folha: 0 1px 0 color-mix(in srgb, var(--papel2) 60%, transparent), 0 14px 34px -12px color-mix(in srgb, var(--papel2) 95%, transparent); --sombra-tinta: 0 1px 0 color-mix(in srgb, var(--tinta) 12%, transparent) inset, 0 8px 20px -10px color-mix(in srgb, var(--papel2) 90%, transparent); --sombra-cartao: var(--sombra-folha); --sombra-sobre-lousa: 0 2px 8px color-mix(in srgb, var(--papel2) 90%, transparent); --sombra-papel: inset 0 0 160px color-mix(in srgb, var(--papel2) 70%, transparent); /* a vinheta do papel */ --sombra-anel-marcador: 0 0 0 3px var(--papel), 0 0 0 5px var(--marcador); /* a mão levantada, o marcador escolhido */ } /* ---------- 1b. TEMA CLARO (Lote C, id0124) ---------- A mesma paleta em outra luminância (§2.4 do prompt do Lote C). Valores aprovados pelo Beny, com o contraste medido no relatório da Fase 1: texto >= 4,5:1 e ícone/fio de controle >= 3:1 em todos os fundos. O --accent troca de papel: era claro sobre escuro e vira escuro sobre claro (igual ao --accent-forte), e o --on-accent claro continua servindo. A LOUSA É CLARA no tema claro (decisão do Beny, id0124): o giz, o quadro, os blocos pintados e o casulo têm valor próprio aqui. O significado das cores do giz não muda — só a luminância (vermelho = etapa, azul = incógnita intermediária, verde = resposta final). */ :root[data-theme="light"] { color-scheme: light; /* Caderno premium: de dia, PAPEL creme e TINTA azul-marinho. */ --bg: #f6f2ea; --bg-subtle: #ede7dc; --surface: #fdfbf7; --surface-2: #ede7dc; --border: #d3d2d0; --border-strong: #7a8292; /* o fio de controle das regras antigas (3:1 no papel); o desenho usa --linha2 */ --text: #1b2a4a; --text-muted: #4a5571; --text-faint: #616878; /* o texto apagado das regras antigas (4,9:1 no papel); o lápis do desenho é --lapis */ --accent: #5a3ea1; /* = --roxo */ --accent-forte: #1b2a4a; /* = --tinta */ --accent-hover: #2a3b5f; --accent-soft: #ebe6f1; --on-accent: #f7f3ea; --ok: #1f7a3f; --atencao: #b9382c; --perigo: #b9382c; --on-accent-hover: #f7f3ea; --google-fundo: #FFFFFF; --google-contorno: #747775; --google-texto: #1F1F1F; --google-hover: #f2f2f2; --painel-cabecalho: #f6f2ea; /* A roda: uma paleta para cada tema (decisão do Beny) — o mesmo papel de cada cor, luminância para fundo claro. A fatia fecha >= 3:1 no véu claro e a tinta >= 4,5:1 na fatia. O "nada escolhido" segue apagado. */ --roda-ouro: #8a6200; --roda-ouro-tinta: #ffffff; --roda-cinza: #5b6270; --roda-cinza-tinta: #ffffff; --roda-verde: #1d7a3a; --roda-verde-tinta: #ffffff; --roda-azul: #1f68c9; --roda-azul-tinta: #ffffff; --roda-branco: #15171c; /* "desenho": o grafite, o inverso do branco */ --roda-branco-tinta: #ffffff; --roda-neutro: #d8dce3; --roda-neutro-tinta: #15171c; --roda-neutro-luz: #5b6270; --traco-desenho: none; --user-bubble: #ebe6f1; --user-borda: #d3d2d0; --user-text: #1b2a4a; /* A lousa de dia: a folha quadriculada, a escrita em tinta, as três tintas da lousa (>= 4,5:1 na folha). */ --giz-vermelho: #b9382c; --giz-azul: #2a5db0; --giz-verde: #1f7a3f; --giz-amarelo: #8a6200; --bloco-roxo: #7c4dcc; --bloco-amarelo: #a87a00; --bloco-laranja: #c2560c; --bloco-rosa: #c2387a; --quadro-bg: #fdfbf7; --quadro-bg-2: #f6f2ea; --quadro-giz: #1b2a4a; --sil-traco: #1b2a4a; --sil-1: #d98a1a; --sil-2: #2f86be; --sil-3: #5f9a2c; --quadro-poeira: rgba(27, 42, 74, .05); --quadro-moldura: #abaeb3; --quadro-moldura-2:#d3d2d0; --realce-fundo: rgba(90, 62, 161, .10); --realce-borda: #5a3ea1; --acerto: #1f7a3f; --acerto-fundo: rgba(31, 122, 63, .12); --erro: #b9382c; --erro-fundo: rgba(185, 56, 44, .10); --pergunta: #5a3ea1; --pergunta-fundo: rgba(90, 62, 161, .08); --casulo-accent: #5a3ea1; --casulo-border: #d3d2d0; --casulo-border-strong: #abaeb3; --casulo-surface-2: #ede7dc; --casulo-text: #1b2a4a; --casulo-text-muted: #4a5571; --casulo-text-faint: #616878; --casulo-bg-subtle: #fdfbf7; --casulo-bg: #fdfbf7; --tema-icone-sol: none; --tema-icone-lua: block; --selo-destaque: #f7f3ea; --seg-polegar-suave: #fdfbf7; /* Caderno premium: o par de cada token do :root (ver lá). De dia, o papel creme e a tinta azul-marinho. */ --papel: #f6f2ea; --papel2: #ede7dc; --folha: #fdfbf7; --tinta: #1b2a4a; --tinta2: #4a5571; --lapis: #8d93a4; --linha: rgba(27, 42, 74, .16); --linha2: rgba(27, 42, 74, .34); --grade: rgba(27, 42, 74, .075); --roxo: #5a3ea1; --roxo-soft: rgba(90, 62, 161, .10); --marcador: #e9b83a; --marcador-tinta: #5a4200; --vermelho: #b9382c; --azul: #2a5db0; --verde: #1f7a3f; --sobre-tinta: #f7f3ea; --grao: radial-gradient(rgba(27, 42, 74, .028) .5px, transparent .8px), radial-gradient(rgba(27, 42, 74, .02) .5px, transparent .8px); --veu-folha: rgba(27, 42, 74, .28); /* No claro é a sombra que mostra a elevação: menu e diálogo ganham a sombra da folha. */ --sombra-acao: 0 3px 0 color-mix(in srgb, var(--accent-forte) 65%, var(--text)); --sombra-acao-apertada: 0 1px 0 color-mix(in srgb, var(--accent-forte) 65%, var(--text)); --sombra-flutuante: var(--sombra-folha); --sombra-foco: inset 0 0 0 1px var(--accent); --sombra-folha: 0 1px 0 color-mix(in srgb, var(--tinta) 6%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--tinta) 22%, transparent); --sombra-tinta: 0 1px 0 color-mix(in srgb, var(--folha) 20%, transparent) inset, 0 8px 20px -10px color-mix(in srgb, var(--tinta) 50%, transparent); --sombra-cartao: var(--sombra-folha); --sombra-sobre-lousa: 0 2px 8px color-mix(in srgb, var(--tinta) 18%, transparent); --sombra-papel: inset 0 0 140px color-mix(in srgb, var(--tinta) 7%, transparent); --sombra-anel-marcador: 0 0 0 3px var(--papel), 0 0 0 5px var(--marcador); } /* ---------- 2. Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* O color-scheme (barra de rolagem, campos nativos) mora nos blocos de tema do :root e desce por herança (id0124). */ } button { font-family: inherit; } /* Utilitário: esconde visualmente mas mantém acessível a leitores de tela. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Foco visível e consistente em toda a interface (acessibilidade). A regra não impõe raio: o outline acompanha o border-radius do próprio elemento (Lote C: arredondado no chrome, reto na lousa). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 3. Layout ---------- */ .app { display: flex; flex-direction: row; /* sidebar + área principal lado a lado */ height: 100dvh; /* dvh lida bem com a barra do navegador mobile */ max-height: 100dvh; overflow: hidden; } /* Coluna principal (topbar + conversa + composer). */ .main { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; /* permite que o conteúdo encolha */ display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; }