//########## Color Palette ###########

$font-size-base: 10px;
$font-size: 1.3em;
$font-size-rate: 1.3;

// Grey tones
//Almost Black: #222222 ($color-text)
//Darkest Gray: #333333 ($color-text-active)
//Dark Gray: #999999 ($color-text-grey)
//Medium Gray: #AAAAAA ($color-icon)
//Light Gray: #DDDDDD ($color-border)
//Bright Gray: #EEEEEE ($color-divider)
//White: #FFFFFF ($color-white)
$color-text: #222;
$color-text-active: #333;
$color-text-grey: #999999;
$color-icon: #AAA;
$color-border: #ddd;
$color-divider: #EEE;
$color-white: #fff;

// petrol colors
//Dark Teal Darkest: #001319
//Dark Teal Dark: #00313F
//Dark Teal Base: #004F66 ($color-primary)
//Dark Teal Light: #336E7F
//Dark Teal Bright: #5B8B99 ($color-text-light)
//Dark Teal Very Bright: #9FBEC7
//Dark Teal Brightest: #C5DBE0 ($color-primary-light)
//Dark Teal Background: #EFF7F9 ($color-popover; $color-primary-superlight)
$color-teal-darkest: #001319;
$color-teal-dark: #00313F;
$color-primary: #004F66;
$color-teal-light: #336E7F;
$color-text-light: #5B8B99;
$color-teal-very-bright: #9FBEC7;
$color-primary-light: #C5DBE0;
$color-primary-superlight: #eff7f9;

// yellow colors
//Golden Brown Darkest: #A56300
//Golden Brown Dark: #BF7200
//Golden Brown Base: #D88200 ($color-accent)
//Golden Brown Light: #FFC166Golden
//Golden Brown Bright: #FFDBA5
//Golden Brown Background: #FCF7EF ($color-accent-superlight)
$color-golden-brown-darkest: #A56300;
$color-golden-brown-dark: #BF7200;
$color-accent: #D88200;
$color-golden-brown-light: #FFC166;
$color-golden-brown-bright: #FFDBA5;
$color-golden-brown-very-bright: #FAEEDC;
$color-golden-brown-very-very-bright: #F0E6D8;
$color-accent-superlight: #FCF7EF;

// upsell colors

$color-premium-dark: #2493B5;
$color-premium: #2bafd8;
$color-premium-darker: #4BBBDE;
$color-premium-superdark: #6AC7E4;
$color-premium-disabled-border: #CEEDF6;
$color-premium-disabled: #EFF9FC;
$color-premium-light: #D8EBF0;
$color-premium-border: #DCF3FA;
$color-premium-lighter: #DFF3F9;



// color magenta
$color-accent2-dark: #9A3274;
$color-accent2: #c03f91;
$color-accent2-light: #FAEEF4;

// graph colors
/**
Graph Two Dark: #A78C2D
Graph Two Base: #C2A234
Graph Three Dark: #34875C
Graph Three Base: #3FA36F
Graph Four Dark: #62499C
Graph Four Base: #7A5BC2
Graph Five Dark: #9E3B32
Graph Five Base: #C64A3F
 */
$color-graph-one-dark: #306993;
$color-graph-one: #3B82B6;
$color-graph-one-light: #EEF4FA;
$color-graph-two-dark: #A78C2D;
$color-graph-two: #C2A234;
$color-graph-two-light: #FAF7EE;
$color-graph-three-dark: #34875C;
$color-graph-three: #3FA36F;
$color-graph-three-light: #ECF6F1;
$color-graph-three-light: #EFF7F3;
$color-graph-four-dark: #62499C;
$color-graph-four: #7A5BC2;
$color-graph-four-light: #F2EFFA;
$color-graph-five-dark: #9E3B32;
$color-graph-five: #C64A3F;
$color-graph-five-light: #FAEFEE;

// Spaces and Sizes and paddings and radiuses
$space-1: .4em;
$space-2: .5em;
$space-3: .75em;
$space-4: 1em;
$radius-xs: .25em;
$radius-sm: .5em;
$radius-md: .75em;
$radius-pill: 3em;
$border-small: .12em;
$border-md: .2em;


$radius-default: $radius-sm;