:root{
  /* tamanhos de ecran */
  --bp-mobile: 600px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* Barras / cores base */
  --bar-title: #4e654e;   /* barra titulo verde escuro */
  --bar-green: #8caa88;   /* barra verde */
  --bar-grey:  #cdcccc;   /* barra cinza claro */
  --bar-cream: #e3d9c1;   /* barra creme */

  /* Modal */
  --modal-bg: #e7e2e2;
  --modal-title-bg: var(--bar-title);
  --modal-title-color: #fff;

  /* Tipografia */
  --modal-title-size: clamp(26px, 5vw, 44px);
  --login-label-size: clamp(18px, 3.3vw, 44px);

  /* Inputs */
  --input-font-size: clamp(16px, 2.2vw, 26px);
  --input-padding: 14px 12px;

  /* Botões */
  --btn-font-size: clamp(16px, 2.1vw, 24px);
  --btn-radius: 14px;

  --btn-grey-bg: #cacaca;
  --btn-grey-color: #111;

  --btn-blue-bg: #47568f;
  --btn-blue-color: #fff;

  --btn-green-bg: #8caa88;
  --btn-green-color: #111;

  --btn-darkgrey-bg: #6e6e6e;
  --btn-darkgrey-color: #fff;
}