/* Default Theme Styling */

:root {
  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(210, 13%, 6%);
  --color-gray: hsl(0, 0%, 33%);
  --color-gray-light: hsl(0, 0%, 87%);
  --color-gray-lighter: hsl(0, 0%, 94%);
  --color-gray-dark: hsl(0, 0%, 27%);
  --color-gray-darker: hsl(0, 0%, 18%);
  --color-primary: hsl(210, 100%, 56%);
  --color-primary--light: hsl(210, 100%, 66%);
  --color-primary--dark: hsl(210, 100%, 46%);
  --color-secondary: hsl(0, 0%, 20%);
  --color-secondary--light: hsl(0, 0%, 30%);
  --color-secondary--dark: hsl(0, 0%, 10%);
  --color-border: hsl(0, 0%, 27%);
  --color-form-accent: hsl(0, 0%, 0%);
  --color-added: hsl(130, 75%, 33%);

  --color-alert-info-light: hsl(218, 82%, 90%);
  --color-alert-info: hsl(218, 82%, 80%);
  --color-alert-info--dark: hsl(218, 82%, 55%);
  --color-alert-info--darker: hsl(218, 82%, 45%);
  --color-alert-error-light: hsl(3, 82%, 90%);
  --color-alert-error: hsl(3, 82%, 80%);
  --color-alert-error--dark: hsl(3, 82%, 55%);
  --color-alert-error--darker: hsl(3, 82%, 45%);
  --color-alert-success-light: hsl(143, 57%, 78%);
  --color-alert-success: hsl(143, 57%, 70%);
  --color-alert-success--dark: hsl(143, 57%, 40%);
  --color-alert-success--darker: hsl(145, 82%, 25%);
  --color-alert-warning-light: hsl(37, 82%, 88%);
  --color-alert-warning: hsl(37, 82%, 80%);
  --color-alert-warning--dark: hsl(37, 82%, 55%);
  --color-alert-warning--darker: hsl(37, 82%, 45%);

  --color-form-element-bg: #a8aeb4;
  --color-form-element-bg-active: #2f3c4b;

  --global-radius: 0.5rem;

  --gutter: 2rem;
  --gutter-half: 1.2rem;

  --icon-smaller: 14px;
  --icon-small: 18px;
  --icon-regular: 20px;
  --icon-medium: 25px;
  --icon-large: 48px;
  --icon-xlarge: 72px;
  --icon-xxlarge: 92px;

  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;

  --font-size-smaller: 11px;
  --font-size-small: 12px;
  --font-size-regular: 14px;
  --font-size-medium: 18px;
  --font-size-large: 22px;
  --font-size-xlarge: 32px;
  --font-size-xxlarge: 48px;
  --font-size-xxxlarge: 64px;

  --transition-faster: 0.1s;
  --transition-fast: 0.3s;
  --transition-slow: 0.8s;
  --transition-slower: 1.4s;

  --swiper-theme-color: var(--color-gray-light);

  --supplier-logo-height: 60px;
}