/* Marca F7 no app React (Brand Kit v1.0.0).
   Cores, raios e sombras de componente vêm do tema routes/themes/theme-f7.json;
   aqui fica só o que o tema não alcança. Mira classes estáveis do MUI (.Mui*),
   nunca as geradas (css-xxxx). Variáveis em /brand/f7-vars.css. */

/* tipografia: Inter no corpo, Space Grotesk só em título */
body { font-family: var(--f7-font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4,
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6,
.MuiDialogTitle-root, .MuiCardHeader-title {
  font-family: var(--f7-font-display) !important;
  letter-spacing: -0.01em;
}
.MuiTypography-h1, .MuiTypography-h2 { letter-spacing: -0.02em; }
.MuiTableCell-root, .MuiTypography-h3, .MuiTypography-h4 { font-variant-numeric: tabular-nums; }
code, kbd, pre, samp { font-family: var(--f7-font-mono); }

/* forma do kit: 6px em botão e campo (algumas telas do bundle fixam outro raio) */
.MuiButton-root, .MuiOutlinedInput-root, .MuiFilledInput-root, .MuiToggleButton-root { border-radius: var(--f7-radius-sm) !important; }
.MuiButton-contained { font-weight: 500; }

/* foco visível em todo interativo */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
[role="tab"]:focus-visible, [role="menuitem"]:focus-visible,
.MuiButtonBase-root.Mui-focusVisible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--f7-teal) !important;
  outline-offset: 2px;
}

/* tabela: 44–48px por linha */
.MuiTableBody-root .MuiTableRow-root { height: 46px; }
.MuiTableHead-root .MuiTableCell-root {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}

/* seleção e barra de rolagem no teal */
::selection { background: color-mix(in srgb, var(--f7-teal) 35%, transparent); }
* { scrollbar-color: var(--f7-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--f7-border); border-radius: var(--f7-radius-full);
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--f7-teal); background-clip: padding-box; }

/* modais: superfície elevada + borda, sem sombra pesada */
[data-mui-color-scheme="dark"] .MuiDialog-paper,
.MuiDialog-paper { border: 1px solid color-mix(in srgb, var(--f7-text-secondary) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
