*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Cada navegação entre páginas é um carregamento de página inteiro (o app não tem roteamento no
   navegador) — sem isso, a troca é um corte seco: a página antiga some, aparece um branco, a nova
   aparece de repente. Isso faz o navegador (Chrome/Edge; outros ignoram, sem quebrar nada) esmaecer
   suavemente entre as duas em vez do corte. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grão sutil sobre toda a tela — a mesma textura de fundo do site institucional
   (grupoodin.com.br). Opacidade mínima (2.2%) e pointer-events:none: dá a mesma atmosfera
   sem interferir em clique nenhum, mesmo por cima de modal/toast. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Títulos e rótulos de marca usam Bebas Neue (--font-display) — mesma identidade do site
   institucional. Texto corrido, tabelas e formulários seguem em Nunito (--font-sans), que já
   é a fonte padrão do body. */
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

h3 {
  font-size: var(--fs-lg);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--color-primary-700);
  color: var(--text-inverse);
}

/* Autofill do navegador (Chrome/Edge) ignora qualquer background-color normal e pinta o campo
   com a cor nativa dele — um cinza-azulado que destoa da paleta escura da marca assim que o
   e-mail/senha salvos preenchem um campo (login, "novo cliente", etc.). O truque do box-shadow
   gigante por dentro (inset) é a única forma de sobrescrever isso; a transição absurdamente longa
   evita o "flash" da cor nativa antes do nosso estilo entrar. Vale pra qualquer input da
   plataforma, não só o login — autofill pode acontecer em qualquer formulário. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-body);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-card-raised) inset;
  box-shadow: 0 0 0 1000px var(--surface-card-raised) inset;
  caret-color: var(--text-body);
  transition: background-color 5000s ease-in-out 0s;
}

.text-muted {
  color: var(--text-muted);
}

.text-sm {
  font-size: var(--fs-sm);
}

.text-xs {
  font-size: var(--fs-xs);
}

.mono {
  font-family: var(--font-mono);
}