/* Etiqa — tokens do site.
 *
 * A paleta herda a família de cores da referência indicada pelo cliente (cemf.com.br): base
 * escura #0f172a, teal #14b8a6 como cor de marca, violeta #7c3aed como acento. Aqui cada uma
 * ganha um significado: teal é sinal e confirmação, violeta é a camada da nuvem, âmbar é
 * pendente, vermelho é bloqueio. O papel claro fica reservado à etiqueta — a única coisa
 * branca da página é o que o servidor renderiza para a gôndola.
 *
 * A tipografia é a Barlow, a mesma família que o renderizador imprime na etiqueta
 * (plataforma/servicos/renderizacao/fontes). Subconjuntada em site/fontes por
 * site/ferramentas/subconjuntar_fontes.sh.
 *
 * Nenhum hex aparece fora deste arquivo. Quem quiser mudar a cara do site mexe aqui.
 */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/barlow-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/barlow-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/barlow-condensed-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/barlow-condensed-bold.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Fundos, do mais fundo ao mais alto. A profundidade vem de camadas, não de gradiente. */
  --fundo-baixo: #0b1220;
  --fundo: #0f172a;
  --fundo-alto: #102331;
  --fundo-alto-2: #102a39;
  --linha: #334155;
  --linha-fraca: rgb(71 85 105 / 0.4);

  /* Texto. */
  --texto-forte: #f7fbfb;
  --texto: #dbe4ee;
  --texto-fraco: #94a3b8;
  /* O tom mais apagado ainda passa de 4,5:1 sobre qualquer fundo daqui, inclusive o alto. */
  --texto-mudo: #7d8ba3;

  /* Marca e sinal. */
  --marca: #14b8a6;
  --marca-forte: #0f766e;
  --marca-media: #0f9488;
  --marca-clara: #8df8ed;
  --nuvem: #7c3aed;
  --nuvem-clara: #a78bfa;

  /* Papel e tinta: o e-paper não é branco puro, é papel. */
  --papel: #ebebe6;
  --papel-caixa: #e4e4de;
  --papel-caixa-clara: #f4f4f0;
  --papel-caixa-escura: #d3d3cc;
  --tinta: #111111;
  --gravado: #5f5f58;

  /* Significados. Nenhuma cor é decorativa. */
  --pendente: #f59e0b;
  --bloqueio: #fca5a5;
  --bloqueio-fundo: rgb(248 113 113 / 0.12);
  --bloqueio-borda: rgb(248 113 113 / 0.5);
  --aviso: #fcd34d;
  --aviso-fundo: rgb(245 158 11 / 0.12);
  --aviso-borda: rgb(245 158 11 / 0.5);
  --ok-fundo: rgb(20 184 166 / 0.12);
  --ok-borda: rgb(20 184 166 / 0.5);
  --marca-tenue: rgb(20 184 166 / 0.16);
  --marca-brilho: rgb(141 248 237 / 0.25);
  --nuvem-tenue: rgb(124 58 237 / 0.16);
  --papel-tenue: rgb(235 235 230 / 0.1);
  --papel-borda-tenue: rgb(235 235 230 / 0.28);
  --grade-ponto: rgb(148 163 184 / 0.14);
  --sombra-cor: rgb(0 0 0 / 0.7);
  --vidro: rgb(15 23 42 / 0.78);

  /* Tipografia. Condensada nos títulos e números (é a fonte do preço na gôndola); normal
   * no corpo; monoespaçada do sistema só no painel do protocolo. */
  --fonte-corpo: "Barlow", "Segoe UI", Roboto, system-ui, sans-serif;
  --fonte-display: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-0: 0.8125rem;
  --t-1: 0.9375rem;
  --t-2: 1.0625rem;
  --t-3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-4: 1.5rem;
  --t-5: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --t-6: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --t-abertura: clamp(2.75rem, 1.4rem + 5vw, 5.75rem);

  /* Ritmo: 4 / 8 / 14 / 24 / 40 / 64. Não é "16 px em tudo". */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.875rem;
  --e4: 1.5rem;
  --e5: 2.5rem;
  --e6: 4rem;
  --secao: clamp(4.5rem, 3rem + 6vw, 10rem);
  --largura: 78rem;
  --margem: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Formas: raio cresce com a hierarquia do objeto, não é um valor só. */
  --r-botao: 4px;
  --r-painel: 10px;
  --r-etiqueta: 14px;
  --r-caixa: 20px;

  /* Movimento. */
  --rapido: 140ms;
  --normal: 320ms;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
}