html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:var(--font-ui);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);background:var(--surface-page)}
*{box-sizing:border-box}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--blue-600);text-decoration:underline}
button{font-family:inherit}
.pronto-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pronto-eyebrow{font-size:var(--text-micro-size);line-height:var(--text-micro-lh);letter-spacing:var(--text-micro-ls);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-subtle)}

/* Layout por superfície. O atributo [data-surface] é aplicado no <html> pelo
   index.html antes do primeiro paint. */

/* Painel: sidebar e topbar fixos, só o conteúdo rola. Abaixo de 860px a página
   volta a rolar inteira (a nav vira barra inferior). */
html[data-surface="painel"],html[data-surface="painel"] body{height:100%}
html[data-surface="painel"] body{overflow:hidden}
html[data-surface="painel"] #root{height:100%}
@media (max-width:860px){
  html[data-surface="painel"],html[data-surface="painel"] body{height:auto}
  html[data-surface="painel"] body{overflow:visible}
  html[data-surface="painel"] #root{height:auto}
}

/* Telão da cozinha: a página rola inteira e o fundo é escuro nos dois temas. */
html[data-surface="cozinha"] body{background:var(--ink-900)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:999px}