/* Temas de cor.
 *
 * Cada tema declara só o par de acentos (claro/escuro). Quem troca entre eles
 * é o escopo de modo, num lugar só — assim nenhuma cor tem sua única definição
 * dentro de um media query. Superfícies e tinta são iguais em todos os temas:
 * o que muda é o acento.
 *
 * Os oito acentos passaram no validador de paleta com contraste >= 3:1 contra
 * as duas superfícies, e os escuros dentro da faixa de luminosidade do modo
 * escuro (L 0,48-0,67). Como só um tema fica ativo por vez, os testes de
 * separação categórica (cores lado a lado no mesmo gráfico) não se aplicam.
 */

/* Clássico claro usa o passo 500 da rampa azul, não o 450 (#2a78d6): naquele
 * tom nem texto branco nem tinta alcançam 4,5:1 em cima do acento — os dois
 * param em ~4,4. Um passo mais escuro resolve sem sair da rampa validada. */
[data-tema='classico'] { --acento-claro: #256abf; --acento-escuro: #3987e5; }
[data-tema='oceano']   { --acento-claro: #0e7c86; --acento-escuro: #1f9aa5; }
[data-tema='menta']    { --acento-claro: #199e70; --acento-escuro: #1baf7a; }
[data-tema='garoa']    { --acento-claro: #5a6b7d; --acento-escuro: #6e8ba3; }
[data-tema='galaxia']  { --acento-claro: #4a3aa7; --acento-escuro: #9085e9; }
[data-tema='petala']   { --acento-claro: #c04070; --acento-escuro: #d55181; }
[data-tema='pordosol'] { --acento-claro: #d95926; --acento-escuro: #eb6834; }
[data-tema='ameixa']   { --acento-claro: #8b3a62; --acento-escuro: #c76a95; }

:root {
  color-scheme: light;

  --acento: var(--acento-claro);

  /* Só entram em cena quando um gráfico tem mais de uma série ao mesmo tempo
   * (durante a troca de medicamento). São os três primeiros slots da paleta
   * categórica validada — os únicos que passam no teste de todos-os-pares. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;

  --plano: #f9f9f7;
  --superficie: #fcfcfb;
  --superficie-2: #f2f1ed;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --tinta-3: #898781;
  --grade: #e1e0d9;
  --eixo: #c3c2b7;
  --borda: rgba(11, 11, 11, 0.1);
  --sombra: 0 1px 2px rgba(11, 11, 11, 0.06), 0 6px 20px rgba(11, 11, 11, 0.06);

  /* Estado — nunca reaproveitados como cor de série. */
  --bom: #0ca30c;
  --atencao: #fab219;
  --grave: #ec835a;
  --critico: #d03b3b;
  --sucesso-txt: #006300;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-modo='claro'])) {
    color-scheme: dark;
    --acento: var(--acento-escuro);
    --plano: #0d0d0d;
    --superficie: #1a1a19;
    --superficie-2: #232322;
    --tinta: #ffffff;
    --tinta-2: #c3c2b7;
    --tinta-3: #898781;
    --grade: #2c2c2a;
    --eixo: #383835;
    --borda: rgba(255, 255, 255, 0.1);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
    --sucesso-txt: #0ca30c;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
  }
}

:root[data-modo='escuro'] {
  color-scheme: dark;
  --acento: var(--acento-escuro);
  --plano: #0d0d0d;
  --superficie: #1a1a19;
  --superficie-2: #232322;
  --tinta: #ffffff;
  --tinta-2: #c3c2b7;
  --tinta-3: #898781;
  --grade: #2c2c2a;
  --eixo: #383835;
  --borda: rgba(255, 255, 255, 0.1);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  --sucesso-txt: #0ca30c;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
}