/*****************************************************************************
Variables
******************************************************************************/

/*****************************************************************************
Color
******************************************************************************/
// Color variables. The different colors are used to define palettes, which are
// used in either the light or dark theme or both.
:root {
	--white-default: #FAF3F0;
	--white-light: #FFFFFF;
	--white-dark: #D9D2D0;


	--black-default: #070809;
	--black-light: #252B31;
	--black-dark: #010202;


	--green-default: #2ADF9A;
	--green-light: #BBEDD6;
	--green-dark: #114834;


	--red-default: #FF526C;
	--red-light: #FBC2C8;
	--red-dark: #511E26;


	--yellow-default: #FFD147;
	--yellow-light: #FCE5AC;
	--yellow-dark: #383015;


	--blue-default: #3F8BFD;
	--blue-light: #C1D3F3;
	--blue-dark: #172F52;


	--pink-default: #F75999;
	--pink-light: #F9C4D5;
	--pink-dark: #4F2034;
}

/*****************************************************************************
Spacing
******************************************************************************/
// Spacing variables used for spacing or sizing.
:root {
  --spacing-s: 0.7rem;
  --spacing-m: 1rem;
  --spacing-l: 1.4rem;
  --spacing-xl: 1.8rem;
}

/*****************************************************************************
Border
******************************************************************************/
// Border width variables.
:root {
  --border-s: 1px;
  --border-m: 2px;
  --border-l: 3px;
  --border-xl: 4px;
}

/*****************************************************************************
Typography
******************************************************************************/
// Imports the following font faces from goolge fonts api
// (https://fonts.google.com/):
//  - Inter (https://fonts.google.com/specimen/Inter)
//    - Light 300
//    - Regular 400
//    - Bold 700
//    - Extra-bold 800
// - Roboto Mono (https://fonts.google.com/specimen/Roboto+Mono)
//    - Bold 700
//    - Bold 700 italic
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

// Imports material icons form the google fonts api (https://fonts.google.com/).
// The icons can be found under 'https://fonts.google.com/icons'.
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');


// Typography vairables
:root {
  // weights
  --font-weight-lighter: lighter;
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --font-weight-bolder: bolder;

  // families
  --font-family-default: 'Inter', sans-serif;
  --font-family-display: 'Roboto Mono', monospace;
	--font-family-icon: 'Material Icons Round';
	--font-family-icon-outlined: 'Material Icons Outlined';

  // sizes
  --font-size-6: 1rem;
  --font-size-5: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-3: 1.75rem;
  --font-size-2: 2rem;
  --font-size-1: 2.5rem;

  --display-font-size-4: 3.5rem;
  --display-font-size-3: 4.5rem;
  --display-font-size-2: 5.5rem;
  --display-font-size-1: 6rem;

  --icon-font-size-6: calc(1.21 * var(--font-size-6));
  --icon-font-size-5: calc(1.21 * var(--font-size-5));
  --icon-font-size-4: calc(1.21 * var(--font-size-4));
  --icon-font-size-3: calc(1.21 * var(--font-size-3));
  --icon-font-size-2: calc(1.21 * var(--font-size-2));
  --icon-font-size-1: calc(1.21 * var(--font-size-1));
}