@import 'mixins';

$breakpoints: (
  '-tiny': (
    max-width: 239px,
  ),
  'tiny': (
    min-width: 240px,
  ),
  '-small': (
    max-width: 319px,
  ),
  'small': (
    min-width: 320px,
  ),
  '-medium': (
    max-width: 767px,
  ),
  'medium': (
    min-width: 768px,
  ),
  'large': (
    min-width: 1024px,
  ),
  'xlarge': (
    min-width: 1440px,
  ),
  'xxlarge': (
    min-width: 1920px,
  ),
) !default;

:root {
  --white: #ffffff;
  --black: #000000;
  // primary
  --burnt-sienna: #bc5845;
  --elephant-green: #13444b;
  --light-sea-green: #1b8186;
  --naples-yellow: #f6d055;
  // secondary
  --pale-violet: #c895ff;
  --pearl-aqua: #71cdbd;
  --middle-purple: #e486be;
  --crayola: #72d7ff;
  --maastricht-blue: #002b39;
  --independence: #4c5a63;
  --pewter-blue: #8fa8b8;
  --bright-gray: #ecf1f3;

  --thin: 150;
  --extra-light: 200;
  --light: 380;
  --normal: 400;
  --medium: 500;
  --semi-bold: 650;
  --bold: 700;

  // Fonts
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', sans-serif;

  // Font sizes
  --font-size-16: 1rem; // 16px
  --font-size-18: 1.125rem; // 18px
  --font-size-21: 1.3125rem; // 21x
  --font-size-26: 1.625rem; // 26px
  --font-size-28: 1.75rem; // 28px
  --font-size-34: 2.125rem; // 34px
  --font-size-48: 3rem; // 48px
  --font-size-56: 3.5rem; // 56px
  --font-size-72: 4.5rem; // 72px

  // Line heights
  --line-height-8: 8px;
  --line-height-22: 22px;
  --line-height-24: 24px;
  --line-height-32: 32px;
  --line-height-40: 40px;
  --line-height-56: 56px;
  --line-height-64: 64px;
  --line-height-88: 88px;

  // Spacings
  --spacing-xxs: 8px;
  --spacing-xs: 16px;
  --spacing-s: 24px;
  --spacing-m: 32px;
  --spacing-l: 40px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;

  --max-content-width: 1290px;
}
