//
// Variables
// --------------------------------------------------

//== Colors
$primary-color: #fcf7ed;
$secondary-color: #f2d43d; //* f2e300
$third-color: #e8611e;
$fourth-color: #332010; //*
$fifth-color: #e9ae1e;
$sixth-color: #2f6052;
$seventh-color: #f49a09;

$primary-bg: #55a9dd; //F7E5C8 > 0e341d
$secondary-bg: #c9e8f5; //e4cea8 > #f6ecd5
$third-bg: #fef9ea;
$fourth-bg: #f6e9cb;
$fifth-bg: #ffffff; //d9cd96 on 13012026
$blue-dark: #0367a6;
$red-dark: #d92929;
$blue-light: #c9e8f5;
$blue-lighter: #2ba2db;

//== Typography

$font-family-primary: "Noto Sans", sans-serif;
$font-family-secondary: "Noto Sans", sans-serif;

//*/*
$color_1: #f2d43d;
$color_red: #d92929; //cb221c
$color_blue: #0a91ef;
// $font-family_1: "proxima-nova";
$background-color_1: #004c7f;
$background-color_2: #002d4b;
$background-color_3: transparent;

//

// Typography
$base-font-size: 1rem; // typically 16px
$font-stack: "Noto Sans", sans-serif;

// Colors
$primary-blue: #007bff;
$text-color: #0d0d0d;
$white: #fff;
// $border-color: #ccc;

// Spacing
$spacing-small: 0.5rem;
$spacing-medium: 1rem;
$spacing-large: 1.5rem;

$media: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px,
  3xl: 1920px,
);

// Using variables
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;
$breakpoint-xxxl: 1550px;

// Using a map (recommended)
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1550px,
);

$h1-size: 4.236rem;
$h2-size: 2.618rem;
$h3-size: 1.618rem;
$h4-size: 1rem;
$h5-size: 0.618rem;
$h6-size: 0.382rem;

//
$fifth-color: #1e6bb6; // simillar to sec color with out alpha
$tab1-color: $secondary-color;
$tab2-color: $tertiary-color;
$matchbox: $secondary-color;

$reviews-dot-inactive: $blue-dark;
$reviews-dot-active: $blue-dark;

$icon-filter: brightness(0) saturate(100%) invert(20%) sepia(72%) saturate(2864%) hue-rotate(186deg) brightness(99%) contrast(102%);
$icon-filter-2: brightness(0) saturate(100%) invert(56%) sepia(72%) saturate(337%) hue-rotate(159deg) brightness(95%) contrast(94%);
$icon-filter-3: brightness(0) saturate(100%) invert(14%) sepia(21%) saturate(3833%) hue-rotate(174deg) brightness(97%) contrast(103%);