// fonts
$base-font-family: 'Roboto', sans-serif;
$base-font-size: 14px;
$font-size-big: 18px;
// font-weight
$font-weight-normal: normal;
$font-weight-bold: 600;

// colors
$background-color: #eeeeee;
$separator-color: #dddddd;

$primary-color: #1469b3;
$secondary-color: #df623b;
$red-danger: #da1d36;
$active-background-color: #e3ebf2;

$navigation-width-open: 240px;
$navigation-width-close: 100px;

$gray-lighter: #f5f5f5;
$gray-lighter-border: #e5e3e3;
$gray-light: #cdcdcd;
$gray: #bcbcbc;
$gray-text: #ababab;
$gray-dark: #444444;

// font-size
$font-size-mini: 0.4rem;
$font-size-small: 0.6rem;
$font-size-little: 0.9rem;
$font-size-normal: 1rem;
$font-size-medium: 1.2rem;
$font-size-large: 1.5rem;
$font-size-extra-large: 1.8rem;
$font-size-huge: 2rem;

// padding / margin
$spacer-1: 0.25rem;
$spacer-2: 0.5rem;
$spacer-3: 0.75rem;
$spacer-4: 1rem;
$spacer-5: 1.5rem;
$spacer-6: 2rem;
$spacer-7: 3rem;
$spacer-8: 4rem;
$spacer-9: 6rem;
$spacer-10: 10rem;

// buttons
$button-height: 45px;
$button-padding: 12px clamp(12px, 2vw, 28px);

// variable components
$height-header: 6rem;

// variable animations
$animation-timing: 0.25s;

/// separators
$separator: 1px solid $separator-color;

// border radius
$border-radius-3: 3px;
$border-radius-5: 5px;
$border-radius-8: 8px;
$border-radius-chip: 5px;
$border-radius-circle: 50%;

// screen sizes
$width-small-screen-px: 800;
$width-medium-screen-px: 1150;

$app-max-width: 1200px;

// Z-INDEX
$z-index-background: -1;
$z-index-initial: 0;
$z-index-foreground: 1;
$z-index-top-layer: 2;