/* =========================================================================
   base.css — Reset, tipografia e utilitários base.
   ========================================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg)}

/* Transicao suave entre paginas (evita a "piscada" branca do refresh).
   Navegadores sem suporte simplesmente navegam normal. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
body{
  font-family:var(--font);font-size:var(--fs-base);
  background:var(--bg);color:var(--text);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}
h3{font-size:var(--fs-lg);font-weight:600}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* Ícones (Phosphor) */
.icon{display:inline-flex;line-height:1;vertical-align:middle}
.icon-sm{font-size:.9rem}
.icon-md{font-size:1.25rem}
.icon-lg{font-size:1.6rem}
.icon-xl{font-size:2.1rem}
.icon-accent{color:var(--primary)}
.icon-success{color:var(--success)}
.icon-danger{color:var(--danger)}
.icon-muted{color:var(--text-faint)}

/* Utilitários */
.text-dim{color:var(--text-dim)}
.text-faint{color:var(--text-faint)}
.hidden{display:none !important}