@import 'breakpoints';

$white: rgb(255, 255, 255);
$white-dark: rgb(168, 183, 196);
$off-white: rgb(250, 250, 250);
$off-white-dark: rgb(228, 235, 242);

$grey: rgb(150, 152, 163);
$grey-dark: rgb(101, 117, 132);
$light-grey: rgb(235, 235, 235);
$dark-grey: rgb(46, 58, 71);
$darker-grey: rgb(51, 53, 61);

$black: rgb(0, 0, 0);
$dark-black: rgb(30, 38, 47);
$darker-black: rgb(14, 20, 26);

$link: rgb(76, 94, 213);
$link-dark: rgb(112, 131, 255);
$link-hover: rgb(118, 131, 226);

$red: rgb(225, 81, 81);
$green: rgb(62, 161, 97);
$green-hover: rgb(105, 185, 133);

$font-size-h1: 52px;
$line-height-h1: 64px;

$font-size-small-body: 14px;
$line-height-small-body: 20px;

$font-size-regular-body: 14px;
$line-height-regular-body: 24px;

$font-size-medium-body: 16px;
$line-height-medium-body: 24px;

$font-size-large-body: 16px;
$line-height-large-body: 28px;

$font-size-footer: 13px;
$line-height-footer: 24px;

$font-size-superscript: 12px;
$line-height-superscript: 24px;

$font-size-title: 15px;
$line-height-title: 24px;

$font-size-large-title: 18px;
$line-height-large-title: 24px;

$font-size-extra-large-title: 32px;
$line-height-extra-large-title: 40px;