body {
  font-family: var(--asa-font-family);
}

/* ============================================================
   RESET
=========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============================================================
   ROOT (DESIGN TOKENS)
=========================================================== */

:root {

  /* CORES BASE */

  --asa-bg: #ffffff;

  --asa-bg-soft: #f8fafc;

  --asa-surface: #ffffff;

  --asa-primary: #4f46e5;

  --asa-primary-hover: #4338ca;

  --asa-text: #0f172a;

  --asa-text-light: #64748b;

  --asa-border: #e2e8f0;


  /* STATUS */

  --asa-success: #22c55e;

  --asa-danger: #ef4444;

  --asa-warning: #f59e0b;


  /* ESPAÇAMENTO */

  --asa-space-xs: 4px;

  --asa-space-sm: 8px;

  --asa-space-md: 16px;

  --asa-space-lg: 24px;

  --asa-space-xl: 32px;


  /* RADIUS */

  --asa-radius-sm: 6px;

  --asa-radius-md: 10px;

  --asa-radius-lg: 16px;


  /* SOMBRA */

  --asa-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);

  --asa-shadow-md: 0 4px 6px rgba(0,0,0,0.08);

}


/* ============================================================
   BASE GLOBAL
=========================================================== */

html,
body {

  height: 100%;

}

body {

  font-family: 'Inter', 'Heebo', system-ui, sans-serif;

  background: var(--asa-bg);

  color: var(--asa-text);

  line-height: 1.5;

}


/* ============================================================
   ELEMENTOS BASE
=========================================================== */

a {

  text-decoration: none;

  color: inherit;

}

button {

  font-family: inherit;

  border: none;

  background: none;

  cursor: pointer;

}

input,
select,
textarea {

  font-family: inherit;

  border: 1px solid var(--asa-border);

  border-radius: var(--asa-radius-sm);

  padding: var(--asa-space-sm);

}


/* ============================================================
   UTILIDADES
=========================================================== */

.asa-hidden {

  display: none !important;

}

.asa-flex {

  display: flex;

}

.asa-center {

  display: flex;

  align-items: center;

  justify-content: center;

}


/* ============================================================
   CONTROLE DE BOTÕES (RESPONSIVO)
=========================================================== */

#mobileBtn {

  display: none;

}

#toggleBtn {

  display: flex;

}

@media (max-width: 1024px) {

  #mobileBtn {

    display: flex;

  }

  #toggleBtn {

    display: none;

  }

}