// Colors
$white: #ffffff;
$black: #000000;
$theme-red: #c72e49;

// Gray shades light
$light-100: #F5F5F5;
$light-200: #EFF0F1;
$light-300: #E8EAEC;
$light-400: #E1E3E6;
$light-500: #D9DDE2;

// Gray shades dark
$dark-0: #19202A;
$dark-100: #212936;
$dark-200: #273140;
$dark-300: #2E394A;
$dark-400: #59667A;
$dark-500: #8A93A4;

// Breakpoints
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

// z-index
$z-index-header: 11;

// Body
$font-family-base: 'Mark', sans-serif;
$font-family-headings: 'Mark', sans-serif;
$font-family-mono: Courier New, Courier ,monospace;
$root-font-size: 16px;
$body-font-size: 1rem;
$body-line-height: 1.6;

// Text
$text-dark-color: #A2ADC0;
$headings-dark-color: #E3EEEF;

// Font size
$font-size-sm: 0.8125rem;
$font-size-md: 0.9375rem;

// Layout
$container-width: 1400px;

:root {
  --content-padding: 1.75rem;

  @include breakpoint-max(breakpoints(lg)) {
    --content-padding: 1.25rem;
  }
}


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

// Header
$header-light-bg: #031733;

// Sidebar
$sidebar-width: 18rem;

// Border Radius
$border-radius: 0.1875rem;
$border-radius-sm: 0.125rem;
$border-radius-lg: 0.3125rem;

// Search
$search-height: 2.65rem;

// Nav - FIXME
$nav-sub-hover-bg: #f8f8f8;
$nav-mobile-bg: $white;
$nav-mobile-width: 300px;
$nav-active-z-index: 100;