$arial: Arial, sans-serif;

$roboto: 'Roboto Mono', monospace;
$regular: 400;
$medium: 500;
$bold: 700;

// Colors
$gray-1: #eee;
$gray-2: #666;
$gray-3: #888;
$gray-4: #ccc;
$gray-5: #444;
$gray-6: #ddd;

$border-1: #f5f5f5;
$background-1: #f9f9f9;
$background-2: #f6f6f6;

$red-1: #af3737;
$red-2: rgba(175, 55, 55, 0.3);
$red-3: rgba(175, 55, 55, 0.15);
$red-4: #902626;


$azul: var(--azul-1);
$azul-2: #1b66ca;


$branco: #fff;
$preto: #000;
$cinzaEscuro: #333;
$cinzaClaro: #727373;
$verde: #34a853;
$cinzaborder: #dadce0;
$azulBtnHover1: rgba(26,115,232,0.3);
$azulBtnHover2: rgba(26,115,232,0.15);


// Pixels X REM
$browser-context: 16;
@function rem($pixels, $context: $browser-context) {
    @return #{$pixels/$context}rem;
}