/*
 * Os tokens do me-lembra: a única fonte dos valores de cor, tipo, raio, espaço e sombra.
 *
 * - O que muda no escuro está no bloco `prefers-color-scheme: dark` lá embaixo.
 * - `scripts/conferir_contraste.py` lê este arquivo e reprova se um par texto/fundo cair abaixo de 4,5:1
 *   (e de 3:1 para borda, foco e faixa). `tokens.json` tem os mesmos valores, para o app Flutter.
 * - Uma regra por linha, `--nome: valor;`: é o formato que o script e o teste leem.
 */

:root {
  /* A superfície e o texto */
  --fundo: #f6f4fb;
  --cartao: #ffffff;
  --texto: #23203a;
  --texto-suave: #5b5775;
  --borda: #dcd8ea;
  --borda-campo: #78748f;
  --foco: #4a33b5;
  --link: #4a33b5;

  /* Os botões: primário, leve e perigo */
  --primario: #5a3cc8;
  --sobre-primario: #ffffff;
  --leve-fundo: #ece7fb;
  --leve-texto: #3d2a99;
  --perigo: #b3243f;
  --sobre-perigo: #ffffff;

  /* Os avisos: o erro, o que deu certo e a insistência */
  --erro-fundo: #fbe8ec;
  --erro-texto: #8f1d33;
  --ok-fundo: #e2f1ea;
  --ok-texto: #1c5f40;
  --insistindo-fundo: #fbe8ec;
  --insistindo-texto: #8f1d33;

  /* As 8 cores de coisa: a faixa e o ícone (-cor), o fundo do ícone e do botão (-fundo) e o texto (-texto) */
  --cor-azul: #3b6fd8;
  --cor-azul-fundo: #e4ebfa;
  --cor-azul-texto: #325eb7;
  --cor-roxo: #7a55e0;
  --cor-roxo-fundo: #ece7fb;
  --cor-roxo-texto: #6c4bc6;
  --cor-rosa: #d9486c;
  --cor-rosa-fundo: #fae5ea;
  --cor-rosa-texto: #aa3855;
  --cor-verde: #2f9b67;
  --cor-verde-fundo: #e2f1ea;
  --cor-verde-texto: #22704a;
  --cor-laranja: #e0701f;
  --cor-laranja-fundo: #fbebe0;
  --cor-laranja-texto: #9b4e15;
  --cor-amarelo: #b88400;
  --cor-amarelo-fundo: #f5eedb;
  --cor-amarelo-texto: #805c00;
  --cor-turquesa: #0e96a5;
  --cor-turquesa-fundo: #ddf0f2;
  --cor-turquesa-texto: #0a6c77;
  --cor-cinza: #6b6880;
  --cor-cinza-fundo: #eaeaed;
  --cor-cinza-texto: #5f5c73;

  /* O céu da hora: o degradê de cada faixa, o texto sobre ele e o cartão do "agora" (-cartao*). O céu tem uma
     paleta no claro e outra no escuro (lá embaixo); o cartão combina com o céu: claro sobre céu claro, escuro sobre escuro. */
  --ceu-madrugada-topo: #090c26;
  --ceu-madrugada-meio: #19204d;
  --ceu-madrugada-baixo: #6b72b3;
  --ceu-madrugada-texto: #edefff;
  --ceu-madrugada-cartao: rgba(14, 16, 38, 0.82);
  --ceu-madrugada-cartao-texto: #ece9f8;
  --ceu-madrugada-cartao-suave: #c3bfdc;
  --ceu-madrugada-cartao-link: #c4b8ff;
  --ceu-madrugada-cartao-botao: #a18bff;
  --ceu-madrugada-cartao-sobre-botao: #14121f;
  --ceu-amanhecer-topo: #9cb4e8;
  --ceu-amanhecer-meio: #f7c6a8;
  --ceu-amanhecer-baixo: #fbe3d0;
  --ceu-amanhecer-texto: #23203a;
  --ceu-amanhecer-cartao: rgba(255, 255, 255, 0.9);
  --ceu-amanhecer-cartao-texto: #23203a;
  --ceu-amanhecer-cartao-suave: #5b5775;
  --ceu-amanhecer-cartao-link: #4a33b5;
  --ceu-amanhecer-cartao-botao: #5a3cc8;
  --ceu-amanhecer-cartao-sobre-botao: #ffffff;
  --ceu-dia-topo: #7fb7f0;
  --ceu-dia-meio: #b9daf7;
  --ceu-dia-baixo: #dcecfb;
  --ceu-dia-texto: #13304f;
  --ceu-dia-cartao: rgba(255, 255, 255, 0.9);
  --ceu-dia-cartao-texto: #23203a;
  --ceu-dia-cartao-suave: #5b5775;
  --ceu-dia-cartao-link: #4a33b5;
  --ceu-dia-cartao-botao: #5a3cc8;
  --ceu-dia-cartao-sobre-botao: #ffffff;
  --ceu-entardecer-topo: #3f3a7a;
  --ceu-entardecer-meio: #8a4f8f;
  --ceu-entardecer-baixo: #c46c78;
  --ceu-entardecer-texto: #ffffff;
  --ceu-entardecer-cartao: rgba(255, 255, 255, 0.9);
  --ceu-entardecer-cartao-texto: #23203a;
  --ceu-entardecer-cartao-suave: #5b5775;
  --ceu-entardecer-cartao-link: #4a33b5;
  --ceu-entardecer-cartao-botao: #5a3cc8;
  --ceu-entardecer-cartao-sobre-botao: #ffffff;
  --ceu-noite-topo: #0e1233;
  --ceu-noite-meio: #232b63;
  --ceu-noite-baixo: #7f86c4;
  --ceu-noite-texto: #edefff;
  --ceu-noite-cartao: rgba(14, 16, 38, 0.82);
  --ceu-noite-cartao-texto: #ece9f8;
  --ceu-noite-cartao-suave: #c3bfdc;
  --ceu-noite-cartao-link: #c4b8ff;
  --ceu-noite-cartao-botao: #a18bff;
  --ceu-noite-cartao-sobre-botao: #14121f;

  /* Os raios */
  --raio-cartao: 18px;
  --raio-icone: 12px;
  --raio-campo: 12px;
  --raio-botao: 999px;

  /* O espaçamento, numa escala de 4 */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;

  /* As sombras */
  --sombra-cartao: 0 1px 0 rgba(35, 32, 58, 0.04), 0 6px 18px -12px rgba(35, 32, 58, 0.25);
  --sombra-alta: 0 12px 32px -16px rgba(35, 32, 58, 0.4);

  /* As fontes e a escala de tamanhos (o texto base é de 17 px) */
  --fonte-texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  --tipo-pequeno: 0.875rem;
  --tipo-base: 1.0625rem;
  --tipo-medio: 1.25rem;
  --tipo-grande: 1.625rem;
  --tipo-titulo: 2rem;
  --entrelinha: 1.5;
  --medida: 70ch;
  --alvo-minimo: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14121f;
    --cartao: #1f1c30;
    --texto: #ece9f8;
    --texto-suave: #b3aecb;
    --borda: #35314a;
    --borda-campo: #8c88a6;
    --foco: #b7a6ff;
    --link: #b7a6ff;

    --primario: #a18bff;
    --sobre-primario: #14121f;
    --leve-fundo: #2e2850;
    --leve-texto: #d6ccff;
    --perigo: #f2778f;
    --sobre-perigo: #14121f;

    --erro-fundo: #4a1f2e;
    --erro-texto: #ffb3c2;
    --ok-fundo: #1e3a30;
    --ok-texto: #9fe0bf;
    --insistindo-fundo: #4a1f2e;
    --insistindo-texto: #ffb3c2;

    --cor-azul: #4a7adb;
    --cor-azul-fundo: #293156;
    --cor-azul-texto: #82a3e6;
    --cor-roxo: #8969e4;
    --cor-roxo-fundo: #362d58;
    --cor-roxo-texto: #ae97ec;
    --cor-rosa: #d9486c;
    --cor-rosa-fundo: #48263d;
    --cor-rosa-texto: #e6859d;
    --cor-verde: #2f9b67;
    --cor-verde-fundo: #23383c;
    --cor-verde-texto: #69b791;
    --cor-laranja: #e0701f;
    --cor-laranja-fundo: #492e2c;
    --cor-laranja-texto: #e89457;
    --cor-amarelo: #c08a00;
    --cor-amarelo-fundo: #423425;
    --cor-amarelo-texto: #cea337;
    --cor-turquesa: #0e96a5;
    --cor-turquesa-fundo: #1b374a;
    --cor-turquesa-texto: #51b3be;
    --cor-cinza: #817f93;
    --cor-cinza-fundo: #353246;
    --cor-cinza-texto: #a8a6b4;

    /* O céu no escuro: a hora segue a mesma, mas o dia vira azul profundo, para não ofuscar. A noite e a madrugada
       guardam o pé escuro daqui: no claro o pé delas sobe para um tom intermediário, que se funde com a página. */
    --ceu-madrugada-baixo: #2e3570;
    --ceu-noite-baixo: #3a3f7e;
    --ceu-madrugada-cartao: rgba(14, 16, 38, 0.82);
    --ceu-madrugada-cartao-texto: #ece9f8;
    --ceu-madrugada-cartao-suave: #c3bfdc;
    --ceu-madrugada-cartao-link: #c4b8ff;
    --ceu-madrugada-cartao-botao: #a18bff;
    --ceu-madrugada-cartao-sobre-botao: #14121f;
    --ceu-amanhecer-topo: #1f2557;
    --ceu-amanhecer-meio: #5a4580;
    --ceu-amanhecer-baixo: #34264a;
    --ceu-amanhecer-texto: #f5f2ff;
    --ceu-amanhecer-cartao: rgba(14, 16, 38, 0.82);
    --ceu-amanhecer-cartao-texto: #ece9f8;
    --ceu-amanhecer-cartao-suave: #c3bfdc;
    --ceu-amanhecer-cartao-link: #c4b8ff;
    --ceu-amanhecer-cartao-botao: #a18bff;
    --ceu-amanhecer-cartao-sobre-botao: #14121f;
    --ceu-dia-topo: #12275a;
    --ceu-dia-meio: #1f4584;
    --ceu-dia-baixo: #1b2c52;
    --ceu-dia-texto: #eaf2ff;
    --ceu-dia-cartao: rgba(14, 16, 38, 0.82);
    --ceu-dia-cartao-texto: #ece9f8;
    --ceu-dia-cartao-suave: #c3bfdc;
    --ceu-dia-cartao-link: #c4b8ff;
    --ceu-dia-cartao-botao: #a18bff;
    --ceu-dia-cartao-sobre-botao: #14121f;
    --ceu-entardecer-topo: #272058;
    --ceu-entardecer-meio: #5e3470;
    --ceu-entardecer-baixo: #44283f;
    --ceu-entardecer-texto: #fff4ee;
    --ceu-entardecer-cartao: rgba(14, 16, 38, 0.82);
    --ceu-entardecer-cartao-texto: #ece9f8;
    --ceu-entardecer-cartao-suave: #c3bfdc;
    --ceu-entardecer-cartao-link: #c4b8ff;
    --ceu-entardecer-cartao-botao: #a18bff;
    --ceu-entardecer-cartao-sobre-botao: #14121f;
    --ceu-noite-cartao: rgba(14, 16, 38, 0.82);
    --ceu-noite-cartao-texto: #ece9f8;
    --ceu-noite-cartao-suave: #c3bfdc;
    --ceu-noite-cartao-link: #c4b8ff;
    --ceu-noite-cartao-botao: #a18bff;
    --ceu-noite-cartao-sobre-botao: #14121f;

    --sombra-cartao: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 18px -12px rgba(0, 0, 0, 0.6);
    --sombra-alta: 0 12px 32px -16px rgba(0, 0, 0, 0.8);
  }
}