/* ==========================================================================
   MATHEUS COSTA - DESIGN SYSTEM "SAGE DARK"
   Camada 2 de 3: BASE
   --------------------------------------------------------------------------
   Reset, estilos de elemento e a camada de grao do fundo. E o unico arquivo
   do sistema que TODA pagina precisa carregar.

   Ordem: fonts.css -> tokens.css -> base.css -> (design-system.css) -> site.css

   A biblioteca de componentes .ds- vive em design-system.css e so e carregada
   por quem usa aquelas classes (hoje, apenas design-system.html).
   ========================================================================== */

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  /* a cor solida mora no html para que o grao (body::after, z-index:-1)
     caiba entre ela e o conteudo, em qualquer estrutura de pagina */
  background:var(--bg);
}

body{
  margin:0;
  background:transparent;
  color:var(--fg);
  font-family:var(--f-body-01-font-family);
  font-size:var(--f-body-01-font-size);
  font-weight:var(--f-body-01-font-weight);
  line-height:var(--f-body-01-line-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* grao de fundo: camada fixa entre a cor solida (html) e o conteudo (body).
   Inerte ao mouse e desligavel zerando --noise-opacity. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--noise-opacity);
  background-image:var(--noise);
  background-repeat:repeat;
  background-size:var(--noise-size) var(--noise-size);
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit}
button,input,textarea,select{font:inherit;color:inherit}
hr{border:0;border-top:var(--border-width) solid var(--border);margin:0}

::selection{background:var(--sage-100);color:var(--sage-950)}

:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
/* ==========================================================================
   PREFERENCIA DE MOVIMENTO REDUZIDO
   Regra global do sistema: vale para qualquer pagina que carregue o base.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}