:root {

  /*--primary-color: rgba(0, 52, 98, 1); !* robyg*!*/
  --primary-color: rgba(0, 55, 94, 1); /* pomorskie domy */
  /*--accent-color: rgba(247, 0, 107, 1); !*robyg*!*/
  --accent-color: rgba(0, 102, 230, 1); /*pomorskie domy*/
  --bg-color: rgba(255,255,255, 1);
  /*--text-color: var(--primary-color); !*robyg*!*/
  --text-color: rgba(81, 110, 121, 1); /*pomorskie domy*/
  --disabled-color: rgb(172, 172, 172);

  --page-padding: 0.25rem;
  --sm-logo-height: 0.75rem;
  --border-radius: 10px;
  --border-width: 1px;
  --button-border-radius: var(--border-radius);
  --button-border-width: var(--border-width);
  --button-spacing: var(--page-padding);
  --button-height: 32px;
  --button-cta-height: 32px;

  --north-arrow-height: calc(var(--button-height) * 1);
  --north-arrow-bg: var(--bg-color);

  --fill-opacity: 0.5;
  --fill-opacity-hover: 0.8;

  --status-available-color: limegreen;
  --status-reserved-color: orange;
  --status-sold-color: red;
  --status-unavailable-color: grey;

  --settlement-stroke: black;
  --settlement-stroke-width: 1px;
  --settlement-stroke-opacity: 0.75;
  --settlement-available-fill: var(--status-available-color);
  --settlement-available-fill-opacity: 0.25;
  --settlement-available-fill-opacity-hover: 0.5;
  --settlement-sold-fill: var(--status-available-color);
  --settlement-sold-fill-opacity: 0.25;
  --settlement-sold-fill-opacity-hover: 0.5;
  --settlement-unavailable-fill: #a5a5a5;
  --settlement-unavailable-fill-opacity: 0.5;
  --settlement-unavailable-fill-opacity-hover: 0.5;

  --animation-status-stroke: black;
  --animation-status-stroke-width: 1px;
  --animation-status-stroke-opacity: 0.75;
  --animation-status-favorite-stroke-width: 4px;
  --animation-status-favorite-stroke: gold;
  --animation-status-available-fill: var(--status-available-color);
  --animation-status-available-fill-opacity: var(--fill-opacity);
  --animation-status-available-fill-opacity-hover: var(--fill-opacity-hover);
  --animation-status-reserved-fill: var(--status-reserved-color);
  --animation-status-reserved-fill-opacity: var(--fill-opacity);
  --animation-status-reserved-fill-opacity-hover: var(--fill-opacity-hover);
  --animation-status-sold-fill: var(--status-sold-color);
  --animation-status-sold-fill-opacity: var(--fill-opacity);
  --animation-status-sold-fill-opacity-hover: var(--fill-opacity-hover);
  --animation-status-unavailable-fill: var(--status-unavailable-color);
  --animation-status-unavailable-fill-opacity: var(--fill-opacity);
  --animation-status-unavailable-fill-opacity-hover: var(--fill-opacity-hover);

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 500;
  --overlay-font-size: 0.5rem;
  --overlay-padding: 0.25rem;

  --clicked-estate-info-base-height: 420px;
}
/* TODO: poprawić responsywność na malutkich*/
@media (min-width: 461px) {
  :root {
    --button-height: 48px;
    --button-cta-height: 48px;
    --page-padding: 0.25rem;
    --sm-logo-height: 1rem;
    --overlay-font-size: 0.75rem;
    --overlay-padding: 0.5rem;
  }
}

@media (min-width: 801px) {
  :root {
    --button-height: 56px;
    --page-padding: 1rem;
    --sm-logo-height: 1.125rem;
    --overlay-font-size: 1rem;
    --overlay-padding: 0.75rem;
  }
}

@media (min-width: 1281px) {
  :root {
    --button-height: 64px;
    --page-padding: 1.5rem;
    --sm-logo-height: 1.25rem;
    --overlay-padding: 0.75rem;
  }
}

@media (min-width: 1601px) {
  :root {
    --button-height: 64px;
    --page-padding: 1.5rem;
    --sm-logo-height: 1.25rem;
    --overlay-font-size: 1.15rem;
    --overlay-padding: 1rem;
  }
}