/* PrintFi Cloud — as fichas do design.
 *
 * Tudo o que é cor, fonte, espaço, raio e sombra vive aqui. O resto
 * do CSS usa só estas fichas, para a interface ficar igual em todas
 * as telas e para uma mudança de marca virar uma linha.
 *
 * Os nomes antigos (--fundo, --primaria...) continuam valendo como
 * atalhos para as fichas novas: quem já usa continua funcionando.
 */

:root {
  /* O navegador desenha os campos (a seta do select, o calendário, a
   * barra de rolagem) na cor do sistema: sem isto, no modo escuro a
   * seta do select some. */
  color-scheme: light dark;

  /* ---------------- cor ---------------- */

  /* Neutros: fundo, superfície e a linha que separa. */
  --cor-fundo: #f6f7f9;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f0f2f5;
  --cor-borda: #e3e6ea;
  --cor-borda-forte: #cfd4da;

  /* Texto: o principal e o de apoio. */
  --cor-texto: #1c2024;
  --cor-texto-suave: #636c78;
  --cor-texto-invertido: #ffffff;

  /* A cor da marca: ação, destaque, caminho ativo. */
  --cor-primaria: #1f6feb;
  --cor-primaria-escura: #1a5fcc;
  --cor-primaria-suave: #e8f1fe;

  /* O azul de destaque **sobre o azul suave**.
   *
   * O azul da marca sobre o fundo suave dá só 4,1:1 — abaixo da
   * linha de 4,5:1. Quando o destaque fica sobre o azul suave, ele
   * precisa de um tom mais fundo (no claro) ou mais claro (no
   * escuro) para se ler.
   */
  --cor-primaria-viva: #1a5fcc;

  /* O azul de **botão cheio** (fundo com o texto branco).
   *
   * É uma ficha à parte porque o azul de destaque (--cor-primaria)
   * é claro demais para o texto branco em fundo escuro: o branco
   * sobre ele dá 3,2:1, e a regra de acessibilidade pede 4,5:1.
   * O azul do botão é mais fundo, e o branco passa.
   */
  --cor-primaria-cheia: #1f6feb;
  --cor-primaria-cheia-escura: #1a5fcc;

  /* O que dá o estado das coisas. */
  --cor-ok: #1a7f4b;
  --cor-ok-suave: #e6f4ec;
  --cor-aviso: #8f5909;
  --cor-aviso-suave: #fdf3e2;
  --cor-critico: #c0392b;
  --cor-critico-suave: #fceceb;

  /* ---------------- fonte ---------------- */

  --fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fonte-tam-1: 12px;
  --fonte-tam-2: 13px;
  --fonte-tam-3: 15px;
  --fonte-tam-4: 18px;
  --fonte-tam-5: 24px;
  --fonte-pes-1: 400;
  --fonte-pes-2: 600;
  --fonte-linha: 1.5;

  /* ---------------- espaço ---------------- */

  /* Uma escala só: 4, 8, 12, 16, 24, 32, 48. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;

  /* ---------------- raio ---------------- */

  --raio-1: 6px;
  --raio-2: 10px;
  --raio-3: 14px;
  --raio-cheio: 999px;

  /* ---------------- elevação ---------------- */

  --elev-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --elev-2: 0 4px 10px rgba(16, 24, 40, .08);
  --elev-3: 0 12px 28px rgba(16, 24, 40, .16);

  /* ---------------- movimento ---------------- */

  --transicao: 140ms ease;

  /* ---------------- atalhos antigos ----------------
     O CSS que já existia usa estes nomes; eles apontam para as
     fichas acima, então mudar a ficha muda o lugar. */

  --fundo: var(--cor-fundo);
  --superficie: var(--cor-superficie);
  --borda: var(--cor-borda);
  --texto: var(--cor-texto);
  --texto-suave: var(--cor-texto-suave);
  --primaria: var(--cor-primaria);
  --primaria-escura: var(--cor-primaria-escura);
  --primaria-cheia: var(--cor-primaria-cheia);
  --primaria-cheia-escura: var(--cor-primaria-cheia-escura);
  --ok: var(--cor-ok);
  --aviso: var(--cor-aviso);
  --critico: var(--cor-critico);
  --raio: var(--raio-2);
  --sombra: var(--elev-1);

  /* ---------------- o aviso que aparece na tela ----------------
   *
   * O toast é a única coisa que aparece por cima de tudo: por isso
   * ele tem cores próprias. No escuro, um verde claro com o texto
   * branco em cima dá 2,3:1 — e ninguém lê um aviso que não se
   * lê. Por isso o toast do escuro é escuro, com o texto na cor do
   * estado. */

  --toast-fundo: var(--cor-texto);
  --toast-texto: var(--cor-fundo);
  --toast-ok-fundo: var(--cor-ok);
  --toast-ok-texto: #ffffff;
  --toast-erro-fundo: var(--cor-critico);
  --toast-erro-texto: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #12161b;
    --cor-superficie: #1a2027;
    --cor-superficie-2: #232b34;
    --cor-borda: #2a323b;
    --cor-borda-forte: #3a444f;
    --cor-texto: #e7ecf1;
    --cor-texto-suave: #97a2ae;
    --cor-primaria: #4c8dff;
    --cor-primaria-escura: #3a7ae8;
    --cor-primaria-suave: #1c2b45;
    --cor-primaria-viva: #8ab4ff;

    /* O botão cheio no escuro é o azul de baixo: com ele o branco
       do texto passa de 4,5:1 (o azul de destaque daria 3,2:1). */
    --cor-primaria-cheia: #2f6fe0;
    --cor-primaria-cheia-escura: #2a66d4;
    --cor-ok: #3ec27a;
    --cor-ok-suave: #162b21;
    --cor-aviso: #e0a13a;
    --cor-aviso-suave: #2e2517;
    --cor-critico: #ef6a5c;
    --cor-critico-suave: #33201f;

    --elev-1: none;
    --elev-2: 0 4px 10px rgba(0, 0, 0, .4);
    --elev-3: 0 12px 28px rgba(0, 0, 0, .5);

    /* O aviso no escuro: fundo escuro, texto na cor do estado. */
    --toast-fundo: var(--cor-superficie-2);
    --toast-texto: var(--cor-texto);
    --toast-ok-fundo: var(--cor-ok-suave);
    --toast-ok-texto: var(--cor-ok);
    --toast-erro-fundo: var(--cor-critico-suave);
    --toast-erro-texto: var(--cor-critico);
  }
}