/* Dora — mascote animado: estilos.  GERADO por tools/construir.py (fonte: tools/fontes/dora-mascote.css).
 *
 * Contém os tokens (iguais aos de tokens.css — pode carregar só este arquivo), a pintura das partes por
 * token e a transição de tema. O movimento é feito por dora-mascote.js em atributos SVG; aqui não há
 * animação CSS, então nada continua mexendo quando o JS para (prefers-reduced-motion).
 *
 * Tamanho: o elemento onde o mascote é montado define a caixa (quadrada); o SVG ocupa 100 %.
 *   <div id="dora" class="dora-mascote dora-mascote--128"></div>   ou width/height no seu CSS.
 * Tema: data-theme="light|dark" no próprio elemento ou em qualquer ancestral; sem data-theme vale o do sistema.
 */
:root,
[data-theme="light"] {
  color-scheme: light;
  --dora-fundo: #fefefe;
  --dora-rosto: #fdfdfd;
  --dora-furo: #fdfdfd;
  --dora-olho-1: #211dbc;
  --dora-olho-2: #1d19ac;
  --dora-olho-3: #151190;
  --dora-boca-1: #0a11b9;
  --dora-boca-2: #2815e4;
  --dora-boca-3: #5c1afe;
  --dora-boca-4: #941afe;
  --dora-boca-5: #ce24fb;
  --dora-boca-lado: #2944b2;
  --dora-boca-meio: #6a5afc;
  --dora-corpo-veu: #dfe5ff;
  --dora-corpo-veu-forca: 0;
  --dora-sinal: #4533fd;
  --dora-azul: #103efd;
  --dora-anil: #4533fd;
  --dora-violeta: #8529fd;
  --dora-faixa-onda: #0536f2;
  --dora-faixa-direita: #9336fb;
  --dora-faixa-inferior: #8c3afc;
  --dora-tinta: var(--dora-olho-2);
  --dora-gradiente: linear-gradient(100deg, var(--dora-azul), var(--dora-anil) 45%, var(--dora-violeta));
  --dora-transicao: 550ms;
  --dora-curva: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --dora-fundo: #0d0f1f;
    --dora-rosto: #181b38;
    --dora-furo: #181b38;
    --dora-olho-1: #e3e6ff;
    --dora-olho-2: #cbd1ff;
    --dora-olho-3: #aab3ff;
    --dora-boca-1: #8ea6ff;
    --dora-boca-2: #a3a5ff;
    --dora-boca-3: #bfa6ff;
    --dora-boca-4: #dba6ff;
    --dora-boca-5: #f6a8ff;
    --dora-boca-lado: #8c93f5;
    --dora-boca-meio: #e6d2ff;
    --dora-corpo-veu: #dfe5ff;
    --dora-corpo-veu-forca: 0.2;
    --dora-sinal: #b6a6ff;
    --dora-azul: #395ffd;
    --dora-anil: #6457fd;
    --dora-violeta: #974ffd;
    --dora-faixa-onda: #3159f5;
    --dora-faixa-direita: #a259fc;
    --dora-faixa-inferior: #9d5cfd;
    --dora-tinta: var(--dora-olho-2);
    --dora-gradiente: linear-gradient(100deg, var(--dora-azul), var(--dora-anil) 45%, var(--dora-violeta));
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --dora-fundo: #0d0f1f;
  --dora-rosto: #181b38;
  --dora-furo: #181b38;
  --dora-olho-1: #e3e6ff;
  --dora-olho-2: #cbd1ff;
  --dora-olho-3: #aab3ff;
  --dora-boca-1: #8ea6ff;
  --dora-boca-2: #a3a5ff;
  --dora-boca-3: #bfa6ff;
  --dora-boca-4: #dba6ff;
  --dora-boca-5: #f6a8ff;
  --dora-boca-lado: #8c93f5;
  --dora-boca-meio: #e6d2ff;
  --dora-corpo-veu: #dfe5ff;
  --dora-corpo-veu-forca: 0.2;
  --dora-sinal: #b6a6ff;
  --dora-azul: #395ffd;
  --dora-anil: #6457fd;
  --dora-violeta: #974ffd;
  --dora-faixa-onda: #3159f5;
  --dora-faixa-direita: #a259fc;
  --dora-faixa-inferior: #9d5cfd;
  --dora-tinta: var(--dora-olho-2);
  --dora-gradiente: linear-gradient(100deg, var(--dora-azul), var(--dora-anil) 45%, var(--dora-violeta));
}

.dora-mascote {
  display: inline-block;
  width: 128px;
  aspect-ratio: 1;
  line-height: 0;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.dora-mascote > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dora-mascote--16 { width: 16px; }
.dora-mascote--32 { width: 32px; }
.dora-mascote--64 { width: 64px; }
.dora-mascote--128 { width: 128px; }
.dora-mascote--256 { width: 256px; }
.dora-mascote--512 { width: 512px; }

/* Pintura por token + transição claro ↔ escuro (paradas de gradiente inclusive). */
.dora-fundo { fill: var(--dora-fundo, #fefefe); transition: fill var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-rosto { fill: var(--dora-rosto, #fdfdfd); transition: fill var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-furo { fill: var(--dora-furo, #fdfdfd); transition: fill var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-veu { fill: var(--dora-corpo-veu, #dfe5ff); opacity: var(--dora-corpo-veu-forca, 0); transition: fill var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)), opacity var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-onda { stroke: var(--dora-sinal, #4533fd); transition: stroke var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-olho-1 { stop-color: var(--dora-olho-1, #211dbc); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-olho-2 { stop-color: var(--dora-olho-2, #1d19ac); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-olho-3 { stop-color: var(--dora-olho-3, #151190); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-1 { stop-color: var(--dora-boca-1, #0a11b9); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-2 { stop-color: var(--dora-boca-2, #2815e4); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-3 { stop-color: var(--dora-boca-3, #5c1afe); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-4 { stop-color: var(--dora-boca-4, #941afe); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-5 { stop-color: var(--dora-boca-5, #ce24fb); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-lado { stop-color: var(--dora-boca-lado, #2944b2); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
.dora-p-boca-meio { stop-color: var(--dora-boca-meio, #6a5afc); transition: stop-color var(--dora-transicao, 550ms) var(--dora-curva, cubic-bezier(.4, 0, .2, 1)); }
@media (prefers-reduced-motion: reduce) {
  .dora-fundo, .dora-rosto, .dora-furo, .dora-veu, .dora-onda, .dora-svg stop { transition: none; }
}