:root {
  /* cores*/
  --branco-total:#FFFFFF;
  --branco-puro-suave:#FAFAFA;
  --branco-esfumado:#F5F5F5;
  --branco-manteiga:#FFFDF7;
  --branco-neve:#FDFDFD;
  --branco-gelo:#F9FAFB;
  --cinza-nevoeiro:#EEEEEE;
  --cinza-nuvem:#E0E0E0;
  --cinza-prata:#BDBDBD;
  --cinza-azulado:#E2E8F0;
  --cinza-chumbo:#424242;
  --cinza-grafite:#212121;
  
  --txt-princiapl: rgb(55 65 81 / 1);
  --txt-secundario: #4A4A4A;
  --txt-figurante: #6B6B6B;
  --txt-auxiliar: #8A8A8A;
  --txt-desabilitado: #B0B0B0;
  --txt-mutado: #6b7280;
  --txt-amarelo: #F4B400;
  --txt-branco: #FAFAFA;
  --txt-preto: #1a1a1a;
  --txt-azul: #1d2a45;

  --borda: #d8d4cf;
  --borda-quase-transparente: color-mix(in srgb, white 20%, transparent);
  --borda-semi-transparente: color-mix(in srgb, white 50%, transparent);

  --amarelo: #feba00;
  --amarelo-suave: #4f4d27;
  --amarelo-hover: #E0A800;
  --amarelo-queimado: #9c8012;
  --branco-cinza: #fafaf8;
  --branco-discreto: #fefefe;
  --azul-escuro: #081f37;
  --azul-claro: hsl(214, 85%, 65%);
  --azul-claro-hover: hsl(214, 85%, 55%);
  --vermelho-botao: hsl(0 95% 55%);
  --vermelho-botao-hover: hsl(0 95% 45%);

  --verde-suave: #e1f6ec;
  --verde: #2cc487;

  --backdrop-preto:rgba(0, 0, 0, 0.3);

  /* font-size (typescale 1.25) */
  --fs-xs: 0.625rem;
  --fs-sm: 0.813rem;
  --fs-md: 1rem;     
  --fs-lg: 1.25rem;   
  --fs-xl: 1.563rem;  
  --fs-2xl: 1.938rem; 
  --fs-3xl: 2.438rem;  
  --fs-4xl: 3.063rem;  
  --fs-5xl: 3.813rem;

  /* Letter-spacing */
  --ls-xs: 0.02em;
  --ls-sm: 0.01em;
  --ls-md: 0;
  --ls-lg: 0;
  --ls-xl: 0;
  --ls-2xl: -0.005em;
  --ls-3xl: -0.01em;
  --ls-4xl: -0.015em;
  --ls-5xl: -0.02em;

  /* Line-height */
  --lh-xs: 1.4;
  --lh-sm: 1.45;
  --lh-md: 1.5;
  --lh-lg: 1.4;
  --lh-xl: 1.3;
  --lh-2xl: 1.25;
  --lh-3xl: 1.2;
  --lh-4xl: 1.15;
  --lh-5xl: 1.1;

  /*Font-weight*/
  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

  /*spacing base*/
  --espacamento: 0.25rem;

  /*Border-radius*/
  --br-xs: 0.125rem;
  --br-sm: 0.25rem;
  --br-md: 0.375rem;
  --br-lg: 0.5rem;
  --br-xl: 0.75rem;
  --br-2xl: 1rem;
  --br-3xl: 1.25rem;  
  --br-4xl: 1.5rem;
  --br-5xl: 2rem;
  --br-full: 9999px;
  --br-circle: 50%;

  /*container width*/
  --container-3xs: 14rem;
  --container-2xs: 16rem;
  --container-xs: 20rem;
  --container-sm: 30rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --container-2xl: 96rem;
  --container-3xl: 112rem;
  --container-full: 100%;

}

/* 1. Usar modelo de box-sizing mais intuitivo */
html {
  box-sizing: border-box;
}

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

/* 2. Remover margem padrao */
*:not(dialog) {
  margin: 0;
}

/* 2.5 Remover padding padrao */
* {
  padding: 0;
}

/* 3. Ativar animacoes de palavras-chave */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Aumentar a altura da linha */
  line-height: 1.5;
  /* 5. Melhorar a renderizacao do texto */
  -webkit-font-smoothing: antialiased;
  font-family: "Poppins", sans-serif;
}

/* 6. Melhorar padroes de midia */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Herdar fontes para controles de formulario */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Evitar transbordamento de texto */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Melhorar quebra de linha */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* 10. Criar um contexto de empilhamento raiz */
#root,
#__next {
  isolation: isolate;
}