/* Bending · tokens da marca v1.0 (brandbook outubro/2026)
   Fontes: Geist e Geist Mono (SIL OFL), via next/font ou Google Fonts. */
:root {
  /* paleta */
  --bending-carepa: #131518;
  --bending-grafite: #2B2F34;
  --bending-aco: #7D848C;
  --bending-nevoa: #C8CDD2;
  --bending-prancha: #F2F4F5;
  --bending-texto-apoio: #535A61; /* texto secundário sobre prancha */

  /* estados (só em ponto de 8 px, sempre com a palavra ao lado; não existe vermelho) */
  --bending-pronta: #3DBE7E;
  --bending-conferir: #E5A13A;
  --bending-conferir-fundo: #FDF6EA; /* linha duvidosa na lista impressa */

  /* tipo */
  --bending-fonte-texto: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bending-fonte-dado: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* vidro */
  --bending-vidro-fundo: rgba(255, 255, 255, .07);
  --bending-vidro-borda: rgba(255, 255, 255, .13);
  --bending-vidro-desfoque: 26px;
  --bending-raio: 28px;
  --bending-raio-interno: 14px;
  --bending-sombra: 0 30px 80px rgba(0, 0, 0, .45);
}

.bending-vidro {
  background: var(--bending-vidro-fundo);
  border: 1px solid var(--bending-vidro-borda);
  -webkit-backdrop-filter: blur(var(--bending-vidro-desfoque)) saturate(1.25);
  backdrop-filter: blur(var(--bending-vidro-desfoque)) saturate(1.25);
  border-radius: var(--bending-raio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--bending-sombra);
  color: var(--bending-prancha);
}

.bending-pilula {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bending-prancha); color: var(--bending-carepa);
  border: 0; border-radius: 999px; padding: 7px 14px;
  font: 500 13px/1 var(--bending-fonte-texto);
}
.bending-pilula--secundaria { background: rgba(255, 255, 255, .1); color: var(--bending-prancha); }

.bending-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--p, var(--bending-aco));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--p, var(--bending-aco)) 22%, transparent);
}
.bending-ponto--pronta { --p: var(--bending-pronta); }
.bending-ponto--conferir { --p: var(--bending-conferir); }

.bending-dado { font-family: var(--bending-fonte-dado); font-variant-numeric: tabular-nums; }