/*
 * Identidade Quati Educação · Módulo Componentes (15)
 *
 * As cores e o logotipo da Quati Educação nos cinco modos de visão (claro, escuro, leitura, Quati e Game), num arquivo só. Cada tela ganha uma linha de link,
 * DEPOIS do próprio <style> e do tema-attio.css (as regras daqui vencem as de mesma força):
 *
 *     <link rel="stylesheet" href="../../geral/componentes/identidade-quati.css">
 *
 * A identidade vale em todos os modos: discreta, pouco chamativa, profissional, premium e sóbria,
 * com a legibilidade do texto em primeiro lugar, porque o aplicativo é de quem analisa, revisa e cura textos.
 *
 * A PALETA DA MARCA e o papel de cada cor (a cor pura da marca só vai onde não é texto; para texto há um tom derivado, mais escuro, que passa no contraste):
 *   Porcelain    #FDFBF7  o cartão e a página (um branco quente)               · base de tudo no modo claro
 *   Dark Walnut  #4A2810  a marca: o nome, a tinta dos títulos e o chip selecionado   · o item ativo do menu
 *   Light Bronze #D6A67B  os fios, os destaques suaves e a barra de itens       · nunca texto
 *   Berry Crush  #AA4465  o toque de cor: o BOTÃO PRINCIPAL (fundo #AA4465, texto branco, nos três modos), o marcador do logotipo, o foco, a aba ativa e o item ativo do menu (texto em #A23F60)
 *   Dark Cyan    #269596  conforme (texto em #17676A, que passa no contraste)
 *   Rusty Spice  #B83A1B  vetar (texto em #A93415)
 *   Amber Earth  #D9821E  reescrever e prazo (texto em #85490A)
 * Texto: tinta #2E1B0D (um marrom quase preto) sobre o Porcelain, 15,9 para 1 (o mínimo recomendado é 7 para 1); cinza de apoio #6B5748, 6,6 para 1.
 * Todas as combinações de texto e fundo dos três modos passam de 4,9 para 1 (WCAG AA), a maioria passa de 7 para 1.
 *
 * O logotipo: o quati (o marcador magenta no rabo) aparece no alto do menu lateral (quati/logo/quati-mascote.svg); nos modos Escuro e Quati entra o mesmo quati com um filete creme
 * fino em volta (quati/logo/quati-mascote-contorno.svg) e no Game o quati em fósforo verde com a bandeira em vermelho neon (quati-mascote-game.svg);
 * a versão toda branca (quati-mascote-branco.svg, quati-marca-branco.png) fica guardada. O nome "QUATI EDUCAÇÃO" (quati/logo/quati-nome.png) é uma máscara: a cor vem do CSS, então vale nos três modos.
 */

/* ---------- Modo claro (aprovado pelo dono: não mudar sem pedido) ---------- */
html:root {
  --bg: #F3EEE6; --surface: #FDFBF7; --sunken: #F8F3EB; --ink: #2E1B0D; --muted: #6B5748; --line: #E2D6C6;
  --accent: #A23F60; --accent-ink: #FFFFFF;
  --warn: #85490A; --warn-bg: #FBEBD3;
  --crit: #A93415; --crit-bg: #F9E4DD;
  --ok: #17676A; --ok-bg: #E3F1F0;
  --pause: #6B4A2A; --pause-bg: #F1E6D6;
  --annot: #9B2F55; --annot-bg: #F8E6EC;
  --scrim: rgb(46 27 13 / .45);
  --marca: #4A2810; --marca-ink: #FDFBF7;
  --btn: #AA4465; --btn-ink: #FFFFFF;
  --bronze: #D6A67B; --barra: #8A5A33;
  --quati-nome: #4A2810;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));   /* tom suave do destaque (usado por telas que têm fundo de destaque) */
}

/* ---------- Modo escuro: as disposições do modo escuro do Claude ----------
   Os tons e as camadas do escuro do Claude: cinza quente neutro, sem o marrom; a página #262624, os cartões um degrau ACIMA #30302E,
   o menu lateral um degrau ABAIXO #1F1E1D (como a barra lateral do Claude), tinta #FAF9F5, apoio #C2C0B6, fios finos #42413E.
   A marca fica: o Berry nos botões principais, no foco, na aba e no item ativo do menu; logotipo todo branco. */
html:root[data-theme="dark"] {
  --bg: #262624; --surface: #30302E; --sunken: #2B2B29; --ink: #FAF9F5; --muted: #C2C0B6; --line: #42413E;
  --accent: #F4A9BE; --accent-ink: #2A0E19;
  --warn: #F8C77F; --warn-bg: #3B3222;
  --crit: #FBA68C; --crit-bg: #3F2A25;
  --ok: #86DADA; --ok-bg: #213735;
  --pause: #EACFAE; --pause-bg: #37332D;
  --annot: #F8B0C6; --annot-bg: #3D2B33;
  --scrim: rgb(0 0 0 / .6);
  --marca: #FAF9F5; --marca-ink: #262624;
  --btn: #AA4465; --btn-ink: #FFFFFF;
  --bronze: #D6A67B; --barra: #D6A67B;
  --quati-nome: #FFFFFF;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-theme="leitura"]):not([data-theme="quati"]):not([data-theme="game"]) {
    --bg: #262624; --surface: #30302E; --sunken: #2B2B29; --ink: #FAF9F5; --muted: #C2C0B6; --line: #42413E;
    --accent: #F4A9BE; --accent-ink: #2A0E19;
    --warn: #F8C77F; --warn-bg: #3B3222;
    --crit: #FBA68C; --crit-bg: #3F2A25;
    --ok: #86DADA; --ok-bg: #213735;
    --pause: #EACFAE; --pause-bg: #37332D;
    --annot: #F8B0C6; --annot-bg: #3D2B33;
    --scrim: rgb(0 0 0 / .6);
    --marca: #FAF9F5; --marca-ink: #262624;
    --btn: #AA4465; --btn-ink: #FFFFFF;
    --bronze: #D6A67B; --barra: #D6A67B;
    --quati-nome: #FFFFFF;
    --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }
}

/* ---------- Modo Quati ----------
   Base #120C0A (um marrom quase preto), cartões um degrau acima; texto e destaques em tons claros; logotipo todo branco. Funciona como um escuro:
   as regras de [data-theme="dark"] das telas valem também aqui (cada uma tem o par [data-theme="quati"]); o menu lateral fica na cor dos cartões. */
html:root[data-theme="quati"] {
  --bg: #120C0A; --surface: #1B1311; --sunken: #160F0D; --ink: #FBF5EC; --muted: #D9C8B5; --line: #3B2B24;
  --accent: #F4A9BE; --accent-ink: #2A0E19;
  --warn: #F8C77F; --warn-bg: #3D2A12;
  --crit: #FBA68C; --crit-bg: #421C14;
  --ok: #86DADA; --ok-bg: #0F2D30;
  --pause: #EACFAE; --pause-bg: #382819;
  --annot: #F8B0C6; --annot-bg: #3D1A2B;
  --scrim: rgb(0 0 0 / .7);
  --marca: #FBF5EC; --marca-ink: #120C0A;
  --btn: #AA4465; --btn-ink: #FFFFFF;
  --bronze: #D6A67B; --barra: #D6A67B;
  --quati-nome: #FFFFFF;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color-scheme: dark;
}

/* ---------- Modo leitura: papel #F1EFE7 e tinta marrom; a fonte é a mesma do claro (tema-attio.css) ---------- */
html:root[data-theme="leitura"] {
  --bg: #F1EFE7; --surface: #F7F5EE; --sunken: #EBE8DE; --ink: #2A170A; --muted: #5C5143; --line: #D9D5C7;
  --accent: #8E3453; --accent-ink: #FFFFFF;
  --warn: #85490A; --warn-bg: #F4E4C4;
  --crit: #A93415; --crit-bg: #F2DDD2;
  --ok: #17676A; --ok-bg: #E0EBE4;
  --pause: #6B4A2A; --pause-bg: #EAE1CF;
  --annot: #8E2D52; --annot-bg: #F2E0E3;
  --scrim: rgb(42 23 10 / .45);
  --marca: #4A2810; --marca-ink: #F7F5EE;
  --btn: #AA4465; --btn-ink: #FFFFFF;
  --bronze: #CFA47A; --barra: #8A5A33;
  --quati-nome: #4A2810;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* ---------- Modo Game ----------
   É o monitor de fósforo verde do botão Game da Análise Gradação (componente do 23, desenho do Pip-Boy), valendo para o aplicativo inteiro,
   como mais um modo de visão ao lado de Claro, Escuro, Leitura e Quati. As cores são as mesmas daquele desenho (--c-acc #D6F23C sobre o quase preto #080A02),
   a letra é a monoespaçada do aplicativo (IBM Plex Mono), as formas ficam retas e a tela ganha as linhas de varredura e o brilho do tubo.
   Como todo modo, fica por pessoa em Preferências (09) e cada tela o marca no seletor de Modo de visão. */
html:root[data-theme="game"] {
  --bg: #080A02; --surface: #101303; --sunken: #0C1002; --ink: #F0FFB8; --muted: #A9C23A; --line: #56681A;
  --accent: #D6F23C; --accent-ink: #0A0D01;
  --warn: #FFD34A; --warn-bg: #1E1C06;
  --crit: #FF6B4A; --crit-bg: #2A0E06;
  --ok: #8FE07A; --ok-bg: #0F1D08;
  --pause: #C7D86A; --pause-bg: #1A1E07;
  --annot: #F2B8D0; --annot-bg: #2A1020;
  --scrim: rgb(0 0 0 / .78);
  --marca: #D6F23C; --marca-ink: #080A02;
  --btn: #D6F23C; --btn-ink: #080A02;
  --bronze: #D6F23C; --barra: #D6F23C;
  --quati-nome: #D6F23C;
  --accent-bg: color-mix(in srgb, var(--accent) 16%, var(--surface));
  /* a letra monoespaçada e as formas retas do visor */
  --f-ui: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 3px; --r-card: 4px; --r-etq: 2px;
  --sombra-1: 0 0 0 1px rgb(214 242 60 / .10), 0 2px 10px rgb(0 0 0 / .55);
  --sombra-2: 0 0 0 1px rgb(214 242 60 / .16), 0 10px 32px rgb(0 0 0 / .65);
  color-scheme: dark;
}
html:root[data-theme="game"] body {
  font-weight: 400; letter-spacing: .01em;
  text-shadow: 0 0 3px rgb(214 242 60 / .22);
  --mn-bg: #0B0E02; --mn-ativo: #1B2206;
}
/* só os rótulos de seção em caixa alta, como num painel; nome de obra, título e texto corrido ficam como são */
html:root[data-theme="game"] :is(.ep-sec, legend) { text-transform: uppercase; letter-spacing: .12em; }
/* os botões viram contorno de fósforo; o principal continua cheio */
html:root[data-theme="game"] :is(.btn, .to-btn):not(.primary):not(.to-principal) { background: transparent; border-color: var(--line); color: var(--accent); }
html:root[data-theme="game"] :is(.btn, .to-btn):not(.primary):not(.to-principal):hover { background: var(--accent-bg); border-color: var(--accent); }
html:root[data-theme="game"] :is(.caixa, .rc, .opcoes, dialog) { box-shadow: var(--sombra-1); }
/* o quati da barra em fósforo verde, o mesmo tratamento do Game da Análise Gradação */
html:root[data-theme="game"] :is(.qm-s, .qm-hs) { filter: grayscale(1) sepia(1) hue-rotate(28deg) saturate(5) brightness(1.15) drop-shadow(0 0 4px rgb(214 242 60 / .8)); }
/* a tela: linhas de varredura, o brilho do canto de cima e a sombra das bordas, por cima de tudo e sem pegar o clique */
html:root[data-theme="game"]::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 38% at 27% 4%, rgb(214 242 60 / .05), transparent 70%),
    radial-gradient(ellipse 112% 112% at 50% 50%, transparent 56%, rgb(0 0 0 / .42) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  html:root[data-theme="game"] body { animation: quati-game-liga .35s ease-out; }
}
@keyframes quati-game-liga { from { opacity: 0 } to { opacity: 1 } }
@media print { html:root[data-theme="game"]::after { display: none } }

/* ---------- Onde a cor aparece ---------- */
/* botão principal: Berry Crush da marca, nos três modos; o texto é branco */
.btn.primary, .to-btn.to-principal { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn.primary:hover, .to-btn.to-principal:hover { background: color-mix(in srgb, var(--btn) 86%, #000); border-color: color-mix(in srgb, var(--btn) 86%, #000); }
.btn.primary:disabled:hover, .btn.primary[aria-disabled="true"]:hover,
.to-btn.to-principal:disabled:hover, .to-btn.to-principal[aria-disabled="true"]:hover { background: var(--btn); border-color: var(--btn); }
.chip.modo-b[aria-pressed="true"] { background: var(--marca); color: var(--marca-ink); border-color: var(--marca); }
/* o único toque de cor (Berry Crush): a aba ativa e o item ativo do menu; os links de tabela ficam na tinta, com sublinhado em berry */
.vol-b[aria-pressed="true"] { border-bottom-color: var(--accent); }
.link-modo { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.link-modo:hover { color: var(--accent); }
.barra-n i { background: var(--barra); }
/* menu lateral: o item ativo ganha um tom de bronze e uma barra fina em berry */
body { --mn-ativo: color-mix(in srgb, var(--bronze) 24%, var(--surface)); }
.mn-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
/* no escuro, o menu fica um degrau abaixo da página e o item ativo um degrau acima, como a barra lateral do Claude */
html:root[data-theme="dark"] body { --mn-bg: #1F1E1D; --mn-ativo: #30302E; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-theme="leitura"]):not([data-theme="quati"]):not([data-theme="game"]) body { --mn-bg: #1F1E1D; --mn-ativo: #30302E; }
}

/* ---------- O logotipo no alto do menu lateral, na horizontal: o quati e, ao lado, o nome "QUATI EDUCAÇÃO" ----------
   O texto da marca na página fica escondido (o nome está no title e para leitores de tela); o quati é imagem e o nome é a máscara de quati-nome.png,
   na cor --quati-nome do modo (marrom no claro e na leitura, branco no escuro). Com o menu recolhido, o logotipo some. */
/* centralizado no espaço que sobra ao lado do botão do menu */
.mn-topo .mn-marca { position: relative; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0; font-size: 0; line-height: 0; }
.mn-topo .mn-marca small { display: none; }
.mn-marca::before {
  content: ""; flex: none; width: 36px; height: 35px;   /* dentro dos 40 px da faixa */
  background: url("quati/logo/quati-mascote.svg") center / contain no-repeat;   /* vetor (nítido em qualquer tela; feito do logo-quati.jpg por quati/fonte/scripts/vetoriza_logo.py) */
}
.mn-marca::after {
  content: ""; flex: none; width: 87px; height: 33px; background: var(--quati-nome);   /* acompanha o quati de 36 px (letras ~30 px, na proporção 319 × 121 do desenho) */
  transform: translateY(-2px);   /* o desenho tem respiro só em cima: sobe 2 px para o meio das letras ficar no meio do quati */
  -webkit-mask: url("quati/logo/faro-quati-nome.png") center / contain no-repeat; mask: url("quati/logo/faro-quati-nome.png") center / contain no-repeat;
}
/* fora do Faro Quati, a barra lateral leva o nome da Quati Educação */
.mn-topo .mn-marca.mn-marca-quati::after { width: 90px; height: 34px; transform: none; -webkit-mask-image: url("quati/logo/quati-nome.png"); mask-image: url("quati/logo/quati-nome.png"); }
/* nos escuros, o quati colorido do logotipo com um filete creme bem fino em volta;
   é a borda clara que a Apple usa para separar um ícone escuro do fundo escuro. Feito por quati/fonte/scripts/variantes_escuro.py */
html:root[data-theme="dark"] .mn-marca::before, html:root[data-theme="quati"] .mn-marca::before { background-image: url("quati/logo/quati-mascote-contorno.svg"); }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-theme="leitura"]):not([data-theme="quati"]):not([data-theme="game"]) .mn-marca::before { background-image: url("quati/logo/quati-mascote-contorno.svg"); }
}
/* no Game, o fósforo verde do quati da barra e a bandeira em vermelho neon; o desenho tem folga para o brilho,
   então a caixa cresce para fora (margem negativa) e o quati fica do mesmo tamanho e no mesmo lugar */
html:root[data-theme="game"] .mn-marca::before { background-image: url("quati/logo/quati-mascote-game.svg"); width: 41px; height: 40px; margin: -2.5px; }
/* o nome "QUATI EDUCAÇÃO" como máscara (a cor muda com o modo); para quem quiser usar em outras telas: <span class="quati-nome"></span> */
.quati-nome {
  display: inline-block; width: 150px; height: 57px; background: var(--quati-nome);
  -webkit-mask: url("quati/logo/quati-nome.png") center / contain no-repeat; mask: url("quati/logo/quati-nome.png") center / contain no-repeat;
}

/* ---------- O quadro-branco (Excalidraw embutido, tela 22): a cor de destaque da ferramenta vira o berry; o resto do editor segue o dele ---------- */
html .excalidraw {
  --color-primary: #8E3453; --color-primary-darker: #7A2C47; --color-primary-darkest: #66243B; --color-primary-hover: #7F2F4A;
  --color-primary-light: #F2DDE4; --color-primary-light-darker: #E6C7D2;
  --color-surface-primary-container: #F2DDE4; --color-on-primary-container: #4A1426;
}
html .excalidraw.theme--dark {
  --color-primary: #F4A9BE; --color-primary-darker: #F8C0D0; --color-primary-darkest: #FBD3DF; --color-primary-hover: #F7B7C9;
  --color-primary-light: #4A2A36; --color-primary-light-darker: #5B3545;
  --color-surface-primary-container: #4A2A36; --color-on-primary-container: #FBD3DF;
}
/* os números dos atalhos das ferramentas e a dica da tela vazia ficam no cinza de apoio do modo (o cinza do editor dá só 2 para 1) */
html .excalidraw .ToolIcon__keybinding, html .excalidraw .HintViewer, html .excalidraw .HintViewer span { color: var(--muted); }

/* os números das etapas (os círculos 1, 2 e 3 do Tratamento de Documentos): o âmbar suave de destaque, o mesmo das etiquetas de aviso */
h2 > .num { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); }

/* a opção de origem selecionada (Este computador, Celular ou tablet, Google Drive) usa um âmbar bem suave de seleção; os ícones das opções ficam no berry */
html .origem:has(input:checked) { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
html .origem:has(input:focus-visible) { outline-color: var(--warn); }

/* ---------- Barras de rolagem no tom do aplicativo ----------
 * O fio da rolagem fina (rolagem-fina.css) usa a cor "barra" da marca: bronze escuro no claro e na leitura, bronze claro no escuro.
 * Vale para a página e para toda área que rola (janelas, listas, campos de texto). */
html:root {
  --rolagem-fio: color-mix(in srgb, var(--barra) 40%, transparent);
  --rolagem-fio-sobre: color-mix(in srgb, var(--barra) 78%, transparent);
}