:root {
  /* Fundo da sala e as placas brancas que flutuam nela. */
  --sala: #e9ebee;
  --sala-2: #dfe2e6;
  --placa: #ffffff;
  --placa-2: #f5f6f8;
  --placa-3: #eceef1;

  /* Os tres cinzas de texto respeitam 4,5:1 sobre o fundo mais claro em uso
     (--sala). O passo entre eles encurtou por causa disso: e o preco de ter
     texto de 10px legivel. */
  --tinta: #14161a;
  --tinta-2: #4a515b;
  --tinta-3: #616973;
  --linha: #e4e7ea;
  --linha-forte: #d2d7dc;

  /* Um acento só, chapado e forte. Marca seleção e marca excesso. */
  --acento: #dff03c;
  --acento-escuro: #c4d620;
  /* Verde para TEXTO. O --acento e claro demais para ler sobre fundo claro:
     #c4d620 sobre branco da 1,6:1, menos de metade do minimo. Este da 5,6:1. */
  --acento-texto: #5f6e04;
  /* Verde para TRACO fino sobre fundo claro. O --acento da 1,26:1 contra o
     branco; o minimo para grafico nao textual e 3:1. Este da 3,6:1. */
  --acento-traco: #7d8f0c;
  --acento-tinta: #15180a;

  /* Estados. Chip colorido, mas sempre com rótulo escrito junto. */
  --ok: #147745;
  --ok-fundo: #e3f4ea;
  --baixo: #be3829;
  --baixo-fundo: #fbe8e5;
  --alto: #955b06;
  --alto-fundo: #fdf3dc;
  --vazio: #626875;
  --vazio-fundo: #edeef0;

  --raio: 12px;
  --raio-g: 20px;
  --raio-gg: 28px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================== tema escuro =====================
   Dois seletores com o MESMO corpo, gerado junto para nao dessincronizar:
   1) preferencia do sistema, a menos que a pessoa tenha pedido claro;
   2) escolha explicita de escuro, que vale mesmo com o sistema no claro. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --sala: #0e1013;
    --sala-2: #080a0c;
    --placa: #16191d;
    --placa-2: #1c2026;
    --placa-3: #22272e;

    --tinta: #eef0f2;
    --tinta-2: #a8b0ba;
    --tinta-3: #888f99;
    --linha: #252a31;
    --linha-forte: #333a43;

    --acento: #dff03c;
    --acento-escuro: #aebe1c;
    --acento-texto: #d2e356;
    --acento-traco: #dff03c;
    --acento-tinta: #15180a;

    --ok: #4ade9a;
    --ok-fundo: #10271c;
    --baixo: #f58a7a;
    --baixo-fundo: #2b1715;
    --alto: #e5b95c;
    --alto-fundo: #2a2212;
    --vazio: #98a0ab;
    --vazio-fundo: #1d2128;
  }
}

:root[data-tema="escuro"] {
  --sala: #0e1013;
  --sala-2: #080a0c;
  --placa: #16191d;
  --placa-2: #1c2026;
  --placa-3: #22272e;

  --tinta: #eef0f2;
  --tinta-2: #a8b0ba;
  --tinta-3: #888f99;
  --linha: #252a31;
  --linha-forte: #333a43;

  --acento: #dff03c;
  --acento-escuro: #aebe1c;
  --acento-texto: #d2e356;
  --acento-traco: #dff03c;
  --acento-tinta: #15180a;

  --ok: #4ade9a;
  --ok-fundo: #10271c;
  --baixo: #f58a7a;
  --baixo-fundo: #2b1715;
  --alto: #e5b95c;
  --alto-fundo: #2a2212;
  --vazio: #98a0ab;
  --vazio-fundo: #1d2128;
}