// Typography
$font-primary: "IBM Plex Sans", sans-serif;
$font-secondary: "Playfair Display", serif;
$font-tertiary: "IBM Plex Mono", monospace;

$font-size-xlarge: 3.125rem; // 50px
$font-size-large: 2.3125rem; // 37px
$font-size-medium: 1.75rem; // 28px
$font-size-small: 1.3125rem; // 21px
$font-size-xsmall: 1rem; // 16px
$font-size-tiny: 0.875rem; // 14px
$font-size-fine: 0.8125rem; // 13px

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-black: 900;

$line-height-small: 1;
$line-height-medium: 1.3;
$line-height-large: 1.5;
$line-height-xlarge: 2;

$letter-spacing-medium: .03em;
$letter-spacing-large: .05em;

// Colors
$color-base: #fff;
$color-primary: #232323;
$color-secondary: #e31e41;
$color-tertiary: #5cd7d5;
$color-accent: #d8d8d8;
$color-accent-secondary: #767676;
$color-accent-dark: #333;
$color-accent-light: #eee;
$color-disabled: $color-accent-secondary;

// Layout and spacing
$spacing-none: 0;
$spacing-tiny: .5em;
$spacing-small: 1em;
$spacing-medium: 2em;
$spacing-large: 3em;

$width-content: 40rem; // 640px

// Stacking
$elevation-under: -1;
$elevation-low: 1;
$elevation-mid: 50;
$elevation-high: 100;

// Breakpoints
$breakpoint-small: 43.75rem; // 600px
$breakpoint-medium: 62.5rem; // 1000px
$breakpoint-large: 75rem; // 1200px
