// Layout
$grid-max-width: 1200px;
$grid-gutter: 20px;
$half-gutter: 10px;
$settings-content-max-width: 780px;

// Colors
html {
  // colour palette light
  // greys
  --color-white: #FFFFFF;
  --color-light1: #F8FAFC;
  --color-light2: #DEE5EB;
  --color-grey1: #8595A8;
  --color-grey2: #495465;
  --color-dark1: #1F232E;
  --color-dark2: #111319;
  --color-black: #000000;
  //colours
  --color-primary: #4353FF;
  --color-primary-light: #ADB4FF;

  .dark-mode {
    --color-white: #000000;
    // TBD rest of default color correspondences
  }
}
$primary-color: var(--color-primary);
$primary-color-light: var(--color-primary-light);

$color-white: var(--color-white);
$color-grey1: var(--color-grey1);
$color-grey2: var(--color-grey2);
$color-light1: var(--color-light1);
$color-light2: var(--color-light2);
$color-dark1: var(--color-dark1);
$color-dark2: var(--color-dark2);
$color-black: var(--color-black);
$color-hover: rgba(133,149,168,0.1);

$valid-color: #12D090;
$invalid-color: #FB4F4F;
$invalid-color-bg: rgba(251,79,79,0.05);

// colors assign
$main-navigation-fg: var(--color-grey1);
$sub-heading-fg: var(--color-grey1);
$footer-navigation-fg: var(--color-grey1);
$footer-titles-fg: var(--color-dark1);
$footer-copyright-fg: var(--color-grey1);
$input-placeholder-fg: var(--color-grey1);
$input-fg: var(--color-dark1);
$text-default-fg: var(--color-dark1);
$border-default-color: var(--color-light2);

// headings
$heading-default-fg: var(--color-dark1);

// Borders
$default-radius: 8px;
$button-radius: 12px;
$item-radius: 12px;

// heights
$gallery-cover-height: 482px;

// z-indexs
$header-z: 20;
$drop-z: 40;

$header-height: 80px;

$modal-shadow: 0 10px 30px 0 rgba(42,44,48,0.15);