// font sizes ----------------------------------------------------------------------------------------------------------
$fs:                        14px; // base size for font size, margins, and paddings

$fs--125:                   round($fs * 1.25);
$fs--15:                    round($fs * 1.5);
$fs--175:                   round($fs * 1.75);
$fs--2:                     $fs * 2;
$fs--225:                   $fs * 2.25;
$fs--25:                    $fs * 2.5;
$fs--3:                     $fs * 3;
$fs--35:                    $fs * 3.5;
$fs--4:                     $fs * 4;
$fs--45:                    $fs * 4.5;
$fs--5:                     $fs * 5;
$fs--55:                    $fs * 5.5;
$fs--6:                     $fs * 6;

$fs--085:                   round($fs * 0.85);
$fs--08:                    round($fs * 0.8);
$fs--075:                   round($fs * 0.75);
$fs--07:                    round($fs * 0.7);
$fs--055:                   round($fs * 0.55);
$fs--05:                    round($fs * 0.5);
$fs--04:                    round($fs * 0.4);
$fs--025:                   round($fs * 0.25);
$fs--02:                    round($fs * 0.2);
$fs--015:                   round($fs * 0.15);


// colors --------------------------------------------------------------------------------------------------------------
// text colors
$text:                      hsl(0, 0%, 33%);

$text--lighter:             lighten($text, 34%);
$text--lightest:            lighten($text, 47%);

$text--inverse:             hsl(0, 0%, 100%);


// colors for clickable items (links, buttons, etc.)
$clickable:                 #01a99d;

$clickable--highlight:      darken(desaturate($clickable, 1%), 10%);


// background colors
$background:                lighten($text, 62%);

$background--darker:        darken($background, 6%);

$background--lightest:      lighten($background, 67%);

$background--highlight:     hsl(51, 98%, 76%);


// LaterPay brand colors
$laterpay-brand:            #01a99d;

$laterpay-brand--darker:    darken(desaturate($laterpay-brand, 1%), 10%);

$laterpay-brand--highlight: saturate(lighten($laterpay-brand, 3%), 7%);


// border colors
$border:                    lighten($text, 53%);

$border--darker:            darken($border, 7%);
$border--darkest:           darken($border, 47%);

$border--lightest:          lighten($border, 11%);


// purchase overlay default colors
$purchase-header-background:  #585759;
$purchase-background:         #F4F3F4;
$purchase-main-text:          #252221;
$purchase-description-text:   #69676A;
$purchase-button-background:  #00AAA2;
$purchase-button-text:        #FFFFFF;
$purchase-footer-background:  #EEEFEF;


// border radii --------------------------------------------------------------------------------------------------------
$border-radius:             3px;


// z-indexes -----------------------------------------------------------------------------------------------------------
$zindex:                    0;
$zindex--recessed:          -1;


// elements on the base layer that need to stick out
$zindex--elevated-1:        10;
$zindex--elevated-2:        11;
$zindex--elevated-3:        12;


// elements that float over the base layer
$zindex--overlayed-1:       100;
$zindex--overlayed-2:       110;
$zindex--overlayed-3:       120;


// elements that must never be covered
$zindex--topmost-1:         1000000;
$zindex--topmost-2:         1000010;
$zindex--topmost-3:         1000020;

$laterpay-menu-background: #4aa69d;