// Colours
$primary: #491F69;
$primary-alpha10: rgba($primary, 0.10);
$primary-alpha15: rgba($primary, 0.15);
$primary-alpha20: rgba($primary, 0.20);
$primary-light: #faf3ff;
$primary-medium: #E9D9F5;

$secondary: #00c8a0;
$secondary-light: #96FBE7;

$white: #ffffff;
$grey-verylight: #f2f2f2;
$grey-light: #E5E5E5;
$grey-medium: #9D9D9D;
$grey-dark: #333;
$black: #000000;

$status-success: #18ED2D;
$status-danger: #E00000;


// Typography
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500,700&display=swap');
$font-family: 'Roboto',
sans-serif;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;


// UI
$border-color: rgba($primary, 0.2);
$border-color: rgba($primary, 0.1);
$border-radius: 5px;

$status-online: $status-success;
$status-offline: $status-danger;


$box-shadow: 0px 0px 10px rgba($black, 0.25);
$box-shadow-light: 0px 0px 10px $primary-alpha15;
$box-shadow-heavy: 0px 4px 27px $primary-alpha15;


$spacing: 16px;
$spacing-sm: 8px;
$spacing-md: 24px;
$spacing-lg: 32px;
$spacing-xl: 64px;

$headerHeight: '80px';
$footerHeight: '60px';

$break-xl: 1440px;
$break-lg: 1170px;
$break-md: 768px;
$break-sm: 480px;