/**
 * CSS properties
 *
 Some values have to be changed in the _variables.scss file.
 Use CMD + click on those values.

 It's recommended to disable unused properties as these get,
 in contrary to SASS variables, compiled in the CSS file.
 */
/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
/**
 * Colums
 */
:root {
  --row-width: 90rem;
  --cols-xsmall: 8;
  --cols: 24;
  --gutter: 22px;
  --wrapper-xsmall: 20px;
  --wrapper: 40px;
}

/**
 * Colors
 */
:root {
  --primary-color: #393F34;
  --primary-light-color: #393F34;
  --primary-dark-color: #393F34;
  --secondary-color: #B07C45;
  --secondary-light-color: #F4F0DE;
  --secondary-dark-color: #B07C45;
  --body-background: #FFFFFF;
  --text-color: var(--primary-dark-color);
  --anchor-color: var(--primary-dark-color);
  --hover-color: var(--primary-light-color);
  --accent-color: var(--primary-color);
  --white: #FFFFFF;
  --light-gray: #F4F4F4;
  --medium-gray: #F1F3F5;
  --dark-gray: #var(--primary-light-color);
  --black: #000000;
  --selection-color: var(--white);
  --selection-background-color: var(--primary-color);
  --primary-filter: invert(19%) sepia(41%) saturate(892%) hue-rotate(173deg) brightness(93%) contrast(93%);
  --white-filter: invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
}

/**
 * Spacings
 */
:root {
  --component-margin-bottom: 100px;
}
@media (min-width: 992px) {
  :root {
    --component-margin-bottom: 200px;
  }
}

/**
 * Text
 */
:root {
  --font-size-body: 1rem;
  --font-size-xxsmall: 0.75rem;
  --font-size-xsmall: 0.875rem;
  --font-size-small: 1rem;
  --font-size-large: 1.25rem;
  --letter-spacing-body: 0;
  --body-font-family: biryani, sans-serif;
  --line-height: 28px;
  --header-font-family: corsairpe, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --header-font-weight: 500;
}

/**
 * Form
 */
:root {
  --font-size-label: var(--font-size-large);
  --font-weight-label: var(--font-weight-normal);
  --form-item-margin: 30px;
  --form-label-color: var(--text-color);
  --form-label-color-focus: var(--primary-light-color);
}

/**
 * Animation
 */
:root {
  --transition-effect: ease-out;
  --transition-duration: .3s;
  --transition: var(--transition-effect) var(--transition-duration) all;
}

/**
 * Navigation
 */
:root {
  --dropdown-menu-min-width: 145px;
  --dropdown-menu-padding: 15px 20px;
}

/**
 * Buttons
 */
:root {
  --button--font-size: 1rem;
  --button-border-radius: 500px;
  --button-font-size: 18px;
  --button-font-family: var(--body-font-family);
  --button--default-bg-color: var(--button--primary-bg-color);
  --button--default-color: var(--button--primary-color);
  --button--default-hover-bg-color: var(--button--primary-hover-bg-color);
  --button--default-hover-color: var(--button--primary-hover-color);
  --button--default-hover-thickness: 1px;
  --button--default-border-color: var(--button--primary-border-color);
  --button--default-hover-border: var(--button--primary-hover-border);
  --button--default-link-hover-color: var(--primary-color);
  --button--primary-bg-color: var(--primary-dark-color);
  --button--primary-color: var(--white);
  --button--primary-border-color: var(--primary-dark-color);
  --button--primary-hover-bg-color: var(--secondary-dark-color);
  --button--primary-hover-color: var(--primary-color);
  --button--primary-hover-border: 1px solid var(--button--primary-hover-bg-color);
}

/**
 * Styling
 */
:root {
  --border-radius: 8px;
  --image-border-radius: --border-radius;
}