@charset "UTF-8";
// Morten Mitchell Larød 2020

// *** COLORS
// ======================================

$sky-blue-100: rgb(226,242,255);
$sky-blue-200: rgb(185,221,255);
$sky-blue-300: rgb(185,221,255);
$sky-blue-400: rgb(86,178,255);
$sky-blue-500: rgb(38,160,255);
$sky-blue-600: rgb(5,143,255);
$sky-blue-700: rgb(25,109,240);
$sky-blue-800: rgb(31,92,221);
$sky-blue-900: rgb(39,58,190);

$powder-blue-100: rgb(230,241,251);
$powder-blue-200: rgb(196,220,245);
$powder-blue-300: rgb(158,199,241);
$powder-blue-400: rgb(123,177,238);
$powder-blue-500: rgb(99,160,236);
$powder-blue-600: rgb(84,145,233);
$powder-blue-700: rgb(78,130,218);
$powder-blue-800: rgb(66,96,182);
$powder-blue-900: rgb(55,66,149);

$letterpress-red-100: rgb(255,235,238);
$letterpress-red-200: rgb(255,205,209);
$letterpress-red-300: rgb(255,154,148);
$letterpress-red-400: rgb(254,113,107);
$letterpress-red-500: rgb(254,74,66);
$letterpress-red-600: rgb(255,47,35);
$letterpress-red-700: rgb(237,33,32);
$letterpress-red-800: rgb(225,24,23);
$letterpress-red-900: rgb(208,3,5);

$sea-green-100: rgb(224,242,241);
$sea-green-200: rgb(178,223,219);
$sea-green-300: rgb(128,203,196);
$sea-green-400: rgb(78,182,172);
$sea-green-500: rgb(38,166,153);
$sea-green-600: rgb(0,150,134);
$sea-green-700: rgb(1,137,122);
$sea-green-800: rgb(3,104,92);
$sea-green-900: rgb(0,77,64);

$sand-yellow-100: rgb(254,248,228);
$sand-yellow-200: rgb(254,237,187);
$sand-yellow-300: rgb(254,226,144);
$sand-yellow-400: rgb(254,216,101);
$sand-yellow-500: rgb(254,206,76);
$sand-yellow-600: rgb(252,185,55);
$sand-yellow-700: rgb(251,166,51);
$sand-yellow-800: rgb(250,150,47);
$sand-yellow-900: rgb(248,120,39);

$warm-grey-100: rgb(252,250,249);
$warm-grey-200: rgb(248,246,245);
$warm-grey-300: rgb(242,240,239);
$warm-grey-400: rgb(229,227,226);
$warm-grey-500: rgb(194,192,191);
$warm-grey-600: rgb(163,162,161);
$warm-grey-700: rgb(122,119,118);
$warm-grey-800: rgb(102,99,98);
$warm-grey-900: rgb(70,69,68);

//BASIC 
$c-white: rgb(255,255,255);
$soft-black: rgb(49,49,48);
$c-black: rgb(0,0,0);

//TEXT
$fc-lightest: $c-white;
$fc-light: $warm-grey-400;
$fc-darkest: $c-black;
$fc-dark: $soft-black;
$fc-dark-medium: $warm-grey-800;
$fc-dark-light: $warm-grey-600;

//LINKS
$link: $sky-blue-800;
$link-hover: $sky-blue-900;

//PRIMARY
$c-primary-lighter: $sky-blue-400;
$c-primary-light: $sky-blue-600;
$c-primary: $sky-blue-700;
$c-primary-dark: $sky-blue-800;

//SECONDARY
$c-secondary-light: $powder-blue-100;
$c-secondary: $powder-blue-200;
$c-secondary-dark: $powder-blue-300;

//ACCENT
$c-error-light: $letterpress-red-300;
$c-error: $letterpress-red-400;
$c-error-dark: $letterpress-red-500;

$c-warning-light: $sand-yellow-200;
$c-warning: $sand-yellow-400;
$c-warning-dark: $sand-yellow-600;

$c-success-light: $sea-green-200;
$c-success: $sea-green-400;
$c-success-dark: $sea-green-600;

//NEUTRAL
$c-neutral-lighter: $warm-grey-200;
$c-neutral-light: $warm-grey-300;
$c-neutral: $warm-grey-400;
$c-neutral-dark: $warm-grey-500;
$c-neutral-darker: $warm-grey-800;
$c-neutral-darkest: $soft-black;





// *** TYPOGRAPHY
// ======================================

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,600i,700&display=swap');
$f-sans: 'Source Sans Pro', sans-serif; // main article text

@font-face { //headlines
    font-family: 'F Grotesk';
    src: url('../fonts/FGrotesk-Bold.woff2') format('woff2'),
        url('../fonts/FGrotesk-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face { //headlines
    font-family: 'F Grotesk';
    src: url('../fonts/FGroteskDemi-Regular.woff2') format('woff2'),
        url('../fonts/FGroteskDemi-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}



// *** SPACING
// ======================================

$grid-element: 8px;

$gap-tiny:     ($grid-element/2);  //  4
$gap-small:    ($grid-element);    //  8
$gap-default:  ($grid-element*2);  // 16
$gap-medium:   ($grid-element*3);  // 24
$gap-large:    ($grid-element*4);  // 32
$gap-xlarge:   ($grid-element*5);  // 40
$gap-xxlarge:  ($grid-element*8);  // 64
$gap-xxxlarge: ($grid-element*10);  // 80

// *** SHADOW
//

$elevation-01: 0px 6px 14px rgba(102, 100, 99, 0.14);
$elevation-03: -20px 0px 32px rgba(102, 100, 99, 0.13);